asked on

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

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<><

leakim971

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

Victor Kimura

ASKER

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?

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Victor Kimura

ASKER

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

leakim971

it work on the jsfiddle right?

SOLUTION

Victor Kimura

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

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" ?

Victor Kimura

ASKER

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?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Victor Kimura

ASKER

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.

leakim971

what is best to trust the true state or what the browser dev tools show to you?

Victor Kimura

ASKER

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<><

Victor Kimura

ASKER

My response clarifies the answer to the problem.