结论：全选后反选失效主因是DOM状态未真实同步，需用input事件监听、手动触发变更通知，并在反选前快照子项状态重算全选框checked与indeterminate。
HTML全选 checkbox 点击后反选逻辑失效？
直接说结论：原生 click 事件触发的「全选」不会自动更新 indeterminate 状态，也不会影响已手动勾选/取消的子项 checked 属性，导致后续反选（toggle）逻辑错乱。关键不是“怎么全选”，而是“全选之后 DOM 状态是否真实同步”。
反选时子项状态和全选框状态不同步的常见表现
典型现象：全选框 显示已勾选，但部分子项实际是 checked="false"；或者反选后，全选框 变成半选（indeterminate），但调用 toggle() 却只清空子项、不更新自身状态。
- 子项用
document.querySelectorAll('.item')遍历时，没同步读取.checked最新值（比如依赖了缓存的旧 DOM 引用） - 反选逻辑写成
item.checked = !item.checked，但没处理全选框的indeterminate和checked联动 - 监听的是
change而非input，错过通过 JS 手动设置checked的变更
用 toggle() + indeterminate 实现健壮反选
反选不是简单取反，而是要基于当前真实状态重算：先统计子项勾选数，再决定全选框是 checked、indeterminate 还是未勾选。
function toggleAll() {
const items = document.querySelectorAll('.item');
const allChecked = Array.from(items).every(i => i.checked);
const someChecked = Array.from(items).some(i => i.checked);
if (allChecked) {
items.forEach(i => i.checked = false);
allCheckbox.checked = false;
allCheckbox.indeterminate = false;
} else {
// 只要有一个没选，就全选；否则（全未选）也全选
items.forEach(i => i.checked = true);
allCheckbox.checked = true;
allCheckbox.indeterminate = false;
}
}
注意：indeterminate 是只读属性，必须用 JS 设置，且它会覆盖 checked 的视觉表现——所以每次更新都要显式控制两者。
立即学习“前端免费学习笔记（深入）”；
全选操作后立即反选失败？检查事件绑定时机
如果全选是通过按钮点击触发的，而反选逻辑绑在子项 change 上，那全选本身并不会触发子项的 change（因为是 JS 直接赋值）。结果就是：全选后子项 DOM 状态变了，但监听器完全没响应，反选逻辑卡死。
- 统一用
input事件监听子项变化（兼容 JS 赋值和用户点击） - 全选函数执行完，手动触发一次
allCheckbox.dispatchEvent(new Event('input'))，让上级逻辑感知状态变更 - 避免在
for循环里反复读取allCheckbox.checked——它可能被中间某次子项变更影响，应先采集快照
最常被忽略的一点：反选不是原子操作。它依赖子项真实状态，而这个状态可能被其他脚本、框架或用户快速交互干扰。别假设“我刚设了 true，它就一定是 true”。
