使用jQuery实现复选框全选/取消全选的异常问题

嘿，我太懂你遇到的这个问题了——这是jQuery开发里一个超常见的小坑，问题出在你用了attr()来操作复选框的选中状态，而不是应该用的prop()。

问题根源 #

HTML标签上的checked属性只是用来定义复选框的初始默认状态，当用户手动勾选或取消复选框后，浏览器维护的是DOM元素上的checked布尔属性（这才是实时的状态）。attr()方法操作的是HTML标签上的属性值，第一次设置后，再手动修改复选框，attr('checked')不会同步更新这个实时状态，导致后续点击全选按钮时，无法正确覆盖手动修改后的复选框状态。

而prop()方法是直接操作DOM对象的属性，能精准同步复选框的实时选中状态，完美解决这个问题。

修正后的代码 #

把你的代码里的attr()替换成prop()，同时可以优化一下代码，用$(this)代替重复选择#checkAll，更简洁高效：

$('#checkAll').on('change', function(){
    // 用$(this)直接获取当前全选框的状态，不用重复选择DOM
    $('.checkbox').prop('checked', $(this).is(":checked"));
});

完整的可运行代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll"> 全选
<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox">
<input class="checkbox" type="checkbox">

<script>
$('#checkAll').on('change', function(){
    $('.checkbox').prop('checked', $(this).is(":checked"));
});
</script>

验证步骤 #

1. 点击全选框，所有复选框会被选中；
2. 手动取消其中一个复选框；
3. 再次点击全选框，所有复选框会重新跟随全选框的状态（选中或取消），完美解决你遇到的问题。

内容的提问来源于stack exchange，提问作者Björn C