全选框状态与子项不一致的根源在于未过滤disabled元素及未正确设置indeterminate状态：统计和操作时须排除disabled项；indeterminate为独立视觉态，需手动设为true且checked必须为false；推荐用事件委托替代逐个绑定。
全选框状态和子项不一致的常见表现
点击“全选”后部分子项没勾上，或手动取消几个子项，顶部全选框仍显示为已勾选（没变灰/没变中间态），甚至反选后全选框状态完全错乱。根本原因不是 JS 写错了，而是状态判定逻辑漏掉了关键条件。
同步逻辑必须过滤 disabled 元素
如果列表里有禁用项（disabled），它们不能参与“是否全选”的判断，否则 checkedCount === totalCount 永远不成立——哪怕所有可操作项都勾了，只要存在一个 disabled，全选框就永远无法变为 checked = true。
- 统计时用
document.querySelectorAll('input[name="item"]:not(:disabled)')获取有效项 - 遍历时也得跳过
:disabled，避免对禁用项赋值checked = true导致 DOM 状态异常 - 反选操作同样要排除
disabled：只翻转enabled项的checked值
indeterminate 状态必须手动设置
indeterminate 不是属性，也不是布尔值，它是个独立视觉状态，且不能写在 HTML 里。用户手动勾选/取消部分子项后，全选框必须显式设为 selectAllCheckbox.indeterminate = true，否则 UI 会误导用户。
- 只有三种情况：
全部勾选 → checked = true, indeterminate = false 全部未勾选 → checked = false, indeterminate = false其余情况 → checked = false, indeterminate = true- 注意：
indeterminate = true时，checked值必须为false，否则部分浏览器会忽略中间态
change 事件委托比逐个绑定更可靠
给每个子 checkbox 单独绑 addEventListener('change', ...) 是性能和维护双重陷阱。1000 个 checkbox 就 1000 个监听器，动态插入的新项也不会自动生效。
- 把监听器挂到父容器上：
container.addEventListener('change', e => { ... }) - 用
e.target.name === 'item'判断是否为目标复选框 - 触发后只更新全选框状态，不操作其他 checkbox —— 避免重复遍历
- 别用
onclick，空格键切换不会触发，导致键盘用户状态不同步
disabled 元素参与状态统计，以及 indeterminate 被当成可读写的布尔属性去处理。这两点一错，UI 和数据就彻底脱节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
