Solved

How to check a radio btn with jQuery? not working from .find() method

Posted on 2015-02-04
14
221 Views
Last Modified: 2016-02-25
Hi,

I have this bit of code:

//formpage.html
<div class="btn-group" data-toggle="buttons">
	<label for="yes_0" class="btn btn-success">
		<input id="yes_0" checked="checked" name="opt1" type="radio" value="1"> Yes
	</label>
	<label for="no_0" class="btn btn-success active">
		<input id="no_0" name="opt1" type="radio" value="0"> No
	</label>
</div>

Open in new window


//init.js
    $("label.btn.btn-success.active, label.btn.btn-danger.active").on('click', function(e) {
        var oInput = $(this).find('input');
        var oInputFirstChild = $(this).find('input:first-child');

        var bChecked = oInputFirstChild.prop('checked', true).change();
    });

Open in new window


But I'm having problems making the radio checked and uhchecked.

I'm using Bootstrap's js radio buttons with it:
http://getbootstrap.com/javascript/#buttons

The Bootstrap's js changes the label with a class of .active. So I'm thinking maybe because I'm using the Bootstrap js that's interfering with my .prop change? How can I resolve this?

Father God bless<><
0
Comment
Question by:Victor Kimura
  • 7
  • 7
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40590787
you don't need additional Javascript : http://jsfiddle.net/sogmx6xv/

just to add jQuery (in my example version 2.1.0):
bootstrap CSS file :
//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css
bootstrap Javascript (after the jQuery plugin) :
//cdn.jsdelivr.net/bootstrap/3.3.2/js/bootstrap.min.js
0
 

Author Comment

by:Victor Kimura
ID: 40591219
Hi leakim971,

Yes, I see. But I do need to change the checked state of the input type='radio'. The Bootstrap Javascript is simply changing the label class (parent to the input radio button) with .active when depressed but it doesn't change the radio's checked state. I'm saving to a database and checking for which radio is checked from a set of radio buttons of "Yes/No" on the page.

The code above:

oInputFirstChild.prop('checked', true).change();

Open in new window


seems to change the checked state but when I look to view the checked status of the radio button in Chrome dev tools and FF dev tools I don't see the checked state change in live preview mode of the Elements section. But when I check via JS for radio checked buttons then I do see it changed. So it seems like that code is working.

Just wondering if it's a bug in Chrome/FF dev tools of why I don't see the change live in Elements for the radio buttons checked state. I do see when the class changes with .active or not when depressing the buttons.

Is this a common problem with the dev tools?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40591637
check what happend after 3seconds and 6 seconds : http://jsfiddle.net/sogmx6xv/3/
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 40591638
jQuery(document).ready(function($) {
    setTimeout(function() {
        $("label[for=yes_0]").click();
    },3000);
    setTimeout(function() {
        $("label[for=no_0]").click();
    },6000);
    
});

Open in new window

0
 

Author Comment

by:Victor Kimura
ID: 40602089
Hi leakin971,

Sorry, I thought I responded to you a couple of days ago. I guess it didn't get submitted. It still doesn't change the checked status when I, say, select "No". I'm attaching the screenshot of my Google Chrome Dev.

What I did was check for the checked status in a jQuery $.each loop and just saved it that way. In addition, I created a function that changes the selected input checked state when the user clicks on the label. This works for me. I don't know if I needed that function but it works.
Screenshot-2015-02-08-12.19.22.png
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40602234
it work on the jsfiddle right?
0
 

Assisted Solution

by:Victor Kimura
Victor Kimura earned 0 total points
ID: 40606662
No, it doesn't. I was just using Chrome. Did you see the attachment? Just a snapshot of what I see in the jsfiddle. When one clicks on yes/no and toggles it the checked state doesn't change for the input tag in the Elements section. However, the label tag which is parent to the input does change the class from 'active' or nothing when clicking on these buttons. Just wondering why the input tag isn't updated.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 82

Expert Comment

by:leakim971
ID: 40606729
No, it doesn't.

so after 3s it doens't switch from "no" to "yes" ?
and after 6s it doesn't switch back to "no" ?
0
 

Author Comment

by:Victor Kimura
ID: 40607067
Yes, it does but I think you're thinking I'm just looking for the visual. I'm talking specifically about the <Input checked='checked'>.

Did you see the attachment? Did you check yourself within Chrome dev tool in Elements and look at that checked status of the <input> tag?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40607146
0
 

Author Comment

by:Victor Kimura
ID: 40607218
Yes, I know it works. But I'm talking specifically about the Chrome Dev tools itself. Just look in the Chrome Dev tools and look in the Elements section and see the changes live in the Chrome Dev tools only. You'll know what I mean. Look a the <label class> and then <input checked> status. But you have to do this live when you're clicking on the btns.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40607224
what is best to trust the true state or what the browser dev tools show to you?
0
 

Author Comment

by:Victor Kimura
ID: 40607258
Yeah, I know. I agree with you leakim971. :) Just was (not now) having trouble of why the checked state was working because I was looking at the Chrome dev tools. It's a strange bug in the dev tools though, don't you think? When I checked in Firefox dev tools too I encountered the same problem though. I didn't check with Opera though. Thanks for the code on jsfiddle. Blessings my friend<><
0
 

Author Closing Comment

by:Victor Kimura
ID: 40622809
My response clarifies the answer to the problem.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now