全选功能需依赖name分组、手动同步indeterminate状态并避免全选框自身误操作；name="item"确保表单提交与后端解析一致，且避免class误选；indeterminate须用js动态设置，先设false再更新checked。
直接说结论：全选功能不是靠 class 或 onclick 写死逻辑就能稳的，关键在 name 分组 + indeterminate 状态手动同步 + 避免误操作全选框自身。
为什么用 name 而不是 class 来分组复选框
浏览器提交表单时，只按 name 收集 checkbox 数据；后端也依赖这个字段解析。用 class 查找容易误伤其他无关 checkbox（比如页面里有「筛选条件」和「操作项」两组 checkbox，都加了 item-checkbox 类）。name="item" 是语义正确、前后端一致的分组依据。
实操建议：
- 所有待控制的子复选框统一设
name="item"，value 各不相同 - 全选框自己不要设
name="item"，可设name="select-all"或干脆不设name - 用
document.querySelectorAll('input[name="item"]')获取目标节点，比getElementsByClassName更快且返回静态 NodeList
如何正确设置 indeterminate 状态
常见错误现象：点全选 → 全勾；手动取消一个 → 全选框仍显示为勾着，没变空，也没变“横杠”，用户无法判断当前是“部分选中”。
这是因为 indeterminate 是只读属性，不能靠 HTML 设置，必须 JS 手动赋值，而且要先设 false 再设 checked，否则状态残留。
实操建议：
- 监听每个子 checkbox 的
change事件 - 统计已勾选项数：
const checkedCount = [...boxes].filter(b => b.checked).length - 更新全选框：
selectAll.indeterminate = checkedCount > 0 && checkedCount - 再设
selectAll.checked = checkedCount === boxes.length（注意顺序）
反选功能为什么不能直接遍历所有 input[type="checkbox"]
反选按钮如果写成 document.querySelectorAll('input[type="checkbox"]')，会把全选框自己也翻转一次 —— 点一下反选，全选框从勾变空，逻辑就崩了。
实操建议：
- 反选函数里只操作
name="item"的复选框：document.querySelectorAll('input[name="item"]') - 对每个 box 执行
box.checked = !box.checked - 反选完必须重新跑一遍统计逻辑（同上），更新全选框的
checked和indeterminate - 别用
box.click()触发事件循环，它会再次触发 change，造成状态抖动
动态加载数据后全选失效怎么办
如果表格是 AJAX 加载或 Vue/React 渲染的，DOM 插入后，之前绑定的事件监听器不会自动生效。尤其 jQuery 时代常犯的错：用 $('input[name="item"]').on('change', ...) 绑定，但新插入的元素没被监听到。
实操建议：
- 原生 JS 推荐用事件委托：监听父容器（如
<tbody>），判断 <code>event.target.name === 'item' - 避免用
onclick="xxx()"写在 HTML 里，不易维护也不支持动态节点 - 如果用框架，优先走响应式数据驱动（如 Vue 的
v-model数组），而不是手动操作 DOM
真正难的不是写几行 box.checked = true，而是让 indeterminate 在各种点击路径下都准确反映真实状态 —— 它不参与提交，但用户就靠它判断当前是全选、全不选，还是中间态。漏掉这一句，交互就残了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
