Question

我有这样的代码：

$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

此代码有效，如果我点击复选框#checkall，则会检查所有checkbox，如果我取消选中#checkall，则取消选中所有checkbox。

第一个问题是，如果我检查#checkall，则会检查所有checkbox，但当我取消选中checkbox #checkall之一仍然检查过的checkbox时，实际上它未被检查，因为checkbox中的一个未选中，并且自动未全部检查。

其次，如果我逐个手动检查所有#checkall，{{1}}未选中，实际上已选中全部检查。

如何解决这个问题？

Answer 1

您需要监控更改事件的所有复选框。简单的规则是#checkAll应该被检查是否（并且仅当）没有UNCHECKED复选框。

类似的东西：

$(document).on("change","input[type=checkbox]",function() {
    $('#checkAll').prop('checked', $('input[type=checkbox]:not(:checked)' ).length == 0);
});

Answer 2

将事件处理程序添加到其他复选框，只检查是否所有复选框都已选中：

var checkAll = $("#checkAll").click(function () {
  allCBs.prop('checked', this.checked);
});

var allCBs = $("input:checkbox:not(#checkAll)").click(function() {
  checkAll.prop("checked", !allCBs.is(":not(:checked)"));
});

label { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label><input type="checkbox" id="checkAll"> Check All</label>
<label><input type="checkbox"> ABC</label>
<label><input type="checkbox"> DEF</label>
<label><input type="checkbox"> GHI</label>

注意：我更喜欢使用click事件而不是change事件，因为有些（较旧的IE）浏览器在焦点离开字段之前不会触发change。< / p>

Jquery - 当复选框取消选中时，如何取消选中checkall？

2 个答案: