反选必须手动逐个翻转子项checked值,全选框状态与子项完全独立,indeterminate需手动维护以准确反映半选状态。

HTML 全选本身对反选逻辑没有任何要求,也不提供任何隐含约束或自动联动——反选行为完全由你写的 JavaScript 决定,且必须手动实现。
全选 checkbox 的 checked 状态不会触发反选
点击全选框只改变它自己的 checked 值,浏览器不会因此“推导”出你要反选、也不会翻转其他 checkbox。常见错误是以为 document.getElementById("checkAll").checked = true 之后,再点一次“反选”按钮就能靠这个值取反,其实不能:它只反映全选框当前是否被勾,和子项状态无关。
- 全选框的
checked是独立状态,不控制子项;子项的checked也从不自动同步到全选框 -
indeterminate是个视觉标记(短横线),设为true后会忽略checked值,但不影响反选逻辑本身 - 若用
setAttribute("checked", "checked")而非直接赋值checkbox.checked = true,DOM 状态不会更新,后续反选读到的仍是旧值
反选必须逐个翻转子项的 checked 值
所谓“反选”,就是对每个目标 checkbox 执行 checkbox.checked = !checkbox.checked。这不是数学意义上的“取反全选状态”,而是对每个控件做一次布尔翻转。
- 不能只判断全选框是否
checked,然后统一设为false——那叫“全不选”,不是反选 - 务必先过滤掉非 checkbox 元素、disabled 项、以及全选框自身,避免
Cannot set property 'checked' of null - 推荐用
querySelectorAll(".row-checkbox")精准获取,比遍历getElementsByTagName("input")更安全 - 动态表格(如分页、懒加载)中,每次 DOM 更新后要重绑事件,或改用事件委托监听
tbody
全选框的 indeterminate 状态需手动维护
indeterminate 不是自动计算出来的,它只是 UI 提示——当部分子项勾选、部分未勾时,你得自己判断并设置它,否则用户看不出当前是“全选/全不选/半选”。
立即学习“前端免费学习笔记(深入)”;
- 每次子项状态变化后,都要统计已勾数量:
const checkedCount = [...checkboxes].filter(c => c.checked).length - 若
checkedCount === 0→checkAll.checked = false; checkAll.indeterminate = false - 若
checkedCount === checkboxes.length→checkAll.checked = true; checkAll.indeterminate = false - 否则 →
checkAll.indeterminate = true; checkAll.checked = false(注意:此时checked必须为false)
最容易被忽略的是:反选操作后,你没重新计算并设置全选框的 indeterminate 和 checked,导致表头状态与实际子项脱节。这问题在部分勾选后点一次反选,再点全选时尤其明显。



















