Question

我有html项目，例如：

<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，那么您可以这样做，

<强> Live Demo

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

对于动态生成的html，您需要on允许您使用静态父级委托事件，您可以使用不知道静态父级的文档。

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

Answer 3

也许这会对你有所帮助：

.siblings("input[type='checkbox']").attr("checked", true);

将选中除了单击的复选框以外的所有复选框。

$("input[type=checkbox]").on("click", function() {

  if ($(this).val() == "none") {
    
    $(this).siblings("input[type=checkbox]").attr('checked', false);
    
  } else {
    
    $(this).siblings("input[value=none]").attr('checked', false);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>

Answer 4

jQuery V：1.6 = << / p>

$( ".foo" ).change(function() {
    $('.foo').not(this).prop('checked', false);
});

jQuery的。如何取消选中除一个以外的所有复选框（已选中）

4 个答案: