jQuery的.如何取消选中除一个以外的所有复选框(已选中)

Question

我有html项目,4个示例:

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

现在,我想要下一个:如果我点击任何复选框 - 应选中复选框,并取消选中其他复选框.我该怎么做？

Answer 1

您可以使用radio按钮并按名称属性对它们进行分组.如果你必须这样做,checkboxes你可以这样做,

现场演示

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

对于动态生成的html,您需要在其上允许您使用静态父级委托事件,您可以使用文档与您不知道静态父级.

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

如果已知文档,则可以用静态父代替.例如,如果div包含动态生成的id,parentdiv则可以拥有

`$('#parentdiv').on('click','.foo', function(){`

编辑

使用prop的,而不是attr对性能checked,selected或disabled按文档.

从jQuery 1.6开始,.attr()方法为尚未设置的属性返回undefined.要检索和更改DOM属性(如表单元素的已检查,已选择或已禁用状态),请使用.prop()方法.

Answer 2

另一种解决方案

$('.foo').click(function(){     
      $('.foo').not(this).attr('checked', false);      
});