Jquery 复选框目标 id 的唯一一个

Question

$(document).ready(function (){
$(function(){
    $('input:checkbox').prop('checked', false)
    $('input:checkbox').click(function(){
        if($(this).is(':checked')){
            $('input:checkbox').not(this).prop('checked', false);        
        }
    });
})
showdiv();

});

---

上面的代码效果很好！！首先，它使所有复选框“未选中”，然后它使一次只能选中“一个”复选框！

但是...我也需要它只影响下面的三个复选框！不是页面上的所有复选框！！！我猜我不知道如何让它只针对 id 的 co33、co34、co35..

<input name="option[13]" id="co33" value="33" checked="checked" onclick="showdiv()" type="radio"> 
<input name="option[14]" id="co34" value="34" checked="checked" onclick="showdiv()" type="radio">  
<input name="option[15]" id="co35" value="35" checked="checked" onclick="showdiv()" type="radio"> 

然后！！！ ...如果其中一个被选中，那么这第四个复选框也会被选中！！如果以上三项都没有勾选，那么这一项也不勾选！

<input id="a1" type="checkbox" onclick="showdiv()" name="add[1]">

我希望结果是正确的.. html 是自动创建的，所以我不能让它们都具有相同的 id 或添加一个类，所以我想看看我是否可以通过 id 名称来定位它们.. 坦率地说，即使只是能够使最初发布的代码仅影响 3 个复选框将很棒。如果选中了三个复选框中的一个，则检查第 4 个复选框是一个奖励！

Answer 1

您将收音机与复选框混为一谈。您还将 DOM 就绪事件包装在 DOM 就绪事件中。给你：

$(function(){
    $('input:checkbox').prop('checked', false);
    $('input:radio').prop('checked', false).filter(function(e){
        return (this.id == 'co33' ||
                this.id == 'co34' ||
                this.id == 'co35');
    }).on('click', function(){
        if($(this).is(':checked')){
            $('input:radio').not(this).prop('checked', false);
            $('#a1').prop('checked', true);
        }        
    });
    showdiv(); 
});

演示：http://jsfiddle.net/qUtQb/

Answer 2

您可以使用属性选择器按名称定位它们，它的效率不是很高，但它会工作并且可能工作得很好。只需将您所有的 $('input:checkbox')s 更改为：

$('input[name="option[13]"], input[name="option[14]"], input[name="option[15]"]')

在点击处理程序的末尾（在 if 之外），执行：

$('#a1').prop(
    "checked",
    $('input[name="option[13]"], input[name="option[14]"], input[name="option[15]"]')
       .is(':checked')
);

编辑：实际上，我只是注意到感兴趣组的 ID，点击它们会更快（并且输入更少）。使用选择器：

$('#co33, #co34, #co35')

Answer 3

你的问题就像

“但是......我也需要它只影响下面的三个复选框！不是页面上的所有复选框！！！猜我不知道如何让它只针对 id 的 co33、co34、co35..”

<input name="option[13]" id="co33" value="33" checked="checked" onclick="showdiv()" type="radio"> 
<input name="option[14]" id="co34" value="34" checked="checked" onclick="showdiv()" type="radio">  
<input name="option[15]" id="co35" value="35" checked="checked" onclick="showdiv()" type="radio"> 

并且您现在拥有HTML 中定义的上述 HTML 标记，它们是无线电而不是 checkbox。

所以试试

$('input:radio').attr('checked', false)
$('input:radio').click(function(){
    if($(this).is(':checked')){
        $('input:radio').not(this).attr('checked', false);        
    }
});

Answer 4

试试类似的东西

$(function(){
    var radios = $('input:radio[name^=option]').prop('checked', false)
    radios.click(function(){
        if($(this).is(':checked')){
            $('input:radio[name^=option]').not(this).prop('checked', false);        
        }

        $('#a1').prop('checked', radios.is(':checked'))
    });

    showdiv();
});

演示：Fiddle