反选不能用 !selectall.checked，必须逐个翻转 box.checked = !box.checked 并排除全选框；应通过 name="item" 获取复选框列表，手动同步 indeterminate 状态，校验后更新全选框状态。
反选逻辑为什么不能用 !selectAll.checked
直接对全选框的 checked 值取反，会导致部分勾选状态下点击“反选”后全部变勾或全部取消——这完全违背用户预期。反选的本质是“把每个已勾的变未勾、未勾的变已勾”，不是翻转全选框自身状态。
常见错误写法：boxes.forEach(box => box.checked = !selectAll.checked)。它只读一次全选框状态，忽略了每行当前真实值。
正确做法必须逐个判断并翻转：box.checked = !box.checked，且明确排除全选框本身（比如通过 name 区分）。
怎么安全获取目标复选框列表
优先用 document.querySelectorAll('input[name="item"]')，而不是靠 class 或遍历 tr 查找。前者语义清晰、性能稳定、不依赖 DOM 结构，也避免动态渲染后漏掉新插入的项。
不要用 getElementsByName：返回的是 HTMLCollection，在某些浏览器中是实时集合，遍历时可能因 DOM 变动出错。
关键点：
- 所有待反选的复选框统一设
name="item" - 全选框设
name="select-all"或不设name - 避免给每个复选框加
id——动态生成易重复，改用data-id存业务主键
indeterminate 状态必须手动同步
反选操作后，全选框可能进入部分勾选状态（比如原来 5 行里勾了 2 行，反选后变成勾 3 行），此时需要手动设置 selectAll.indeterminate = true，否则视觉上仍显示为纯勾或纯空。
注意顺序：selectAll.indeterminate = false 必须先执行，再赋值 selectAll.checked，否则中间态残留可能导致后续判断失效。
校验逻辑建议放在反选函数末尾：
const checkedCount = document.querySelectorAll('input[name="item"]:checked').length;
const total = document.querySelectorAll('input[name="item"]').length;
if (checkedCount === 0) {
selectAll.checked = false;
selectAll.indeterminate = false;
} else if (checkedCount === total) {
selectAll.checked = true;
selectAll.indeterminate = false;
} else {
selectAll.checked = false;
selectAll.indeterminate = true;
}
自定义样式复选框的反选陷阱
如果用了伪元素（::before/::after）覆盖原生 checkbox 样式，反选时仍必须操作原生 <input type="checkbox"> 元素本身，不能绑事件到外层 <label></label> 或容器上。
容易踩的坑：
- 用
label.click()触发切换 → 可能导致change事件触发两次（尤其快速连点） - 监听
click而非change→ 键盘空格切换、屏幕阅读器操作失效 - 读取
getAttribute("checked")→ 返回初始 HTML 属性值，不是当前状态；必须用element.checked
反选代码里只做一件事：box.checked = !box.checked，其余交给浏览器和 CSS 自动响应。
checked 和 indeterminate 都准确反映当前分布，且不干扰自定义样式背后的原生行为。稍有遗漏，用户就会看到状态错位或交互失灵。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
