Question

当我选择一个现有的单选按钮时，我需要选择具有类似unique_id的单选按钮。这是代码：

$('.test li input:radio').change(function () {

    var unique_id = $(this).attr('unique_id');
    $('input:radio').each(function () {

        if ($(this).attr('unique_id') == unique_id) {
            $(this).attr('checked', true);
        } else {
            $(this).attr('checked', false);
        }

    });
});

Fiddle

在谷歌浏览器中，它可以工作但并不总是如此。它可能有效，可能无效。尝试多次选择无线电。在Mozilla中它根本不起作用。我该怎么办？

Answer 1

$（'。test li input [type =“radio”]'）。change（function（evt）{

var other_el= $('.test li input[type="radio"][unique_id="' + $(evt.target).attr('unique_id') + '"]').not($(evt.target));


if (other_el.length === 1){
    other_el.attr('checked', $(evt.target).has(':checked')); 
}

}）;

这是一个链接：http://jsfiddle.net/Sj4Ah/1/

享受！

Answer 2

$('.test li input:radio').change(function(){
    $('input[unique_id="'+$(this).attr('unique_id')+'"]').prop('checked', true);
});

Fiddle

当选中具有相同name属性的另一个无线电时，浏览器会自动取消检查无线电输入，因此只要您的所有无线电组具有相同的unique_id项目，您就不必这样做手动。此外，change事件仅在检查时触发无线电输入，因此您只需检查所有具有相同unique_id属性的无线电，以保持组同步。

至于为什么您的原始代码在Firefox中不起作用，您应该使用.prop()来设置checked属性。 Avoid using .attr() to set DOM element properties。现在使用.prop()查看原始fiddle。除此之外我找不到任何逻辑错误，尽管可以进一步简化使用vanilla JS设置checked属性：

$('.test li input:radio').change(function(){
    var unique_id = $(this).attr('unique_id');
    $('input:radio').each(function(){
        this.checked = $(this).attr('unique_id') == unique_id;
    });
});

Fiddle

此问题已在CodersClan上收到答案。

如何选择具有相似unique_id的无线电

2 个答案: