javascript - Is there a bug with radio buttons in jQuery 1.9.1? - Stack Overflow

admin管理员组

文章数量:1194938

I've been trying to programatically select radio buttons with jQuery, something I thought would be as simple as changing the checked attribute.

However, the following code doesn't seem to do what is expected in jQuery 1.9.1 in Chrome/Firefox.

Expected behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM.

Actual behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM for the first and second button clicked, subsequent buttons don't render as checked.

jQuery:

$('div.form-type-radio').on('click', function () {    
    var Id = $(this).find('input[type=radio]').attr('id');   
    $('form input[type=radio]:not(#'+Id+')').removeAttr('checked');   
    $('#' + Id).attr('checked', 'checked');    
    console.log($('#' + Id));    
});

Here's a jsFiddle - /

I've tried the same code with previous versions of jQuery and it all works as expected.

I've been trying to programatically select radio buttons with jQuery, something I thought would be as simple as changing the checked attribute.

However, the following code doesn't seem to do what is expected in jQuery 1.9.1 in Chrome/Firefox.

Expected behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM.

Actual behaviour: Click the div enclosing the radio button -> 'checked' attribute gets set -> renders checked in the DOM for the first and second button clicked, subsequent buttons don't render as checked.

jQuery:

$('div.form-type-radio').on('click', function () {    
    var Id = $(this).find('input[type=radio]').attr('id');   
    $('form input[type=radio]:not(#'+Id+')').removeAttr('checked');   
    $('#' + Id).attr('checked', 'checked');    
    console.log($('#' + Id));    
});

Here's a jsFiddle - http://jsfiddle.net/GL9gC/

I've tried the same code with previous versions of jQuery and it all works as expected.

• javascript
• jquery
• debugging
• jquery-selectors

Share Improve this question Follow edited Apr 6, 2013 at 9:21 dsgriffin 68.6k1717 gold badges140140 silver badges138138 bronze badges asked Apr 5, 2013 at 22:46 SimonSimon 1,86933 gold badges2323 silver badges3030 bronze badges 2

• 1 Not that it has anything to do with this, but why the heck would you get the element, then the ID, and a few lines below use the ID to get the element, again? (not works with elements as well). Your entire function could be just $('input[type=radio]', this).prop('checked', true); – adeneo Commented Apr 5, 2013 at 22:51
• That was just left over from some head scratching and debugging, just being absolutely sure I had the ID. – Simon Commented Apr 5, 2013 at 23:07

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 24

In this case, you should use prop() instead of attr()/removeAttr().

Here's a working jsFiddle.

jQuery:

$('div.form-type-radio').on('click', function () {
    var Id = $(this).find('input[type=radio]').prop('id');
    $('form input[type=radio]:not(#'+Id+')').prop('checked');
    $('#' + Id).prop('checked', 'checked');
    console.log($('#' + Id));
});

LIVE DEMO

$('div.form-type-radio').on('click', function () {    
    $(this).find(':radio').prop({checked: true});
});

http://api.jquery.com/prop/

本文标签： javascriptIs there a bug with radio buttons in jQuery 191Stack Overflow