11

我一直在尝试使用 jQuery 以编程方式选择单选按钮，我认为这就像更改选中的属性一样简单。

但是，以下代码似乎并没有在 Chrome/Firefox 中执行 jQuery 1.9.1 中的预期。

预期行为：单击包含单选按钮的 div -> 'checked' 属性被设置 -> 在 DOM 中呈现检查。

实际行为：单击包含单选按钮的 div -> 'checked' 属性被设置 -> 在 DOM 中为单击的第一个和第二个按钮呈现选中状态，后续按钮不会呈现为选中状态。

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));    
});

这是一个 jsFiddle - http://jsfiddle.net/GL9gC/

我已经用以前版本的 jQuery 尝试了相同的代码，并且一切都按预期工作。

4

2 回答 2

23

在这种情况下，您应该使用prop()而不是attr() / removeAttr()。

这是一个有效的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));
});
于 2013-04-05T22:49:30.880 回答
2

LIVE DEMO

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

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

于 2013-04-05T22:53:22.377 回答