如何使用复选框创建“选中/取消选中所有”？ [复制]

Question

我想要一个按钮，用于选中或取消选中所有复选框。

这是我的标记：

<div id="container">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>
<button type="button" id="addAll">add all</button>
<button type="button" id="removeAll">remove all</button>

这是我的脚本：

$("#addAll").click(function() {
  $("#container input:checkbox").attr('checked', 'checked');
});
$("#removeAll").click(function() {
  $("#container input:checkbox").removeAttr('checked');
});

但它没有按预期工作：

• 检查所有，有效
• 取消选中所有，有效
• 再次检查，没有任何反应

可能是什么错误？

见this fiddle

Answer 1

$("#addAll").click(function() {
  $("#container input:checkbox").prop('checked', true);
});
$("#removeAll").click(function() {
  $("#container input:checkbox").prop('checked',false);
});

---

这可能是 jquery 中的一个错误，因为使用原生 setAttribute 和 removeAttribute 可以正常工作。

https://jsfiddle.net/jz5p57k9/

我为 Jquery 团队打开了一个 bug，你可以在这里关注它： https://github.com/jquery/jquery/issues/3242#issuecomment-234315378

.attr和.prop的区别请看这个问题：.prop() vs .attr()