全选按钮通过name属性建立逻辑归属关系，而非class或data属性；所有受控复选框需统一name值（如name="item"），全选框name应不同（如name="select-all"）；监听其change事件批量设置目标框checked，并同步更新indeterminate状态以准确反映部分选中情况。
全选按钮怎么绑定到一组复选框
关键不是靠 class 或 name 硬匹配，而是用 name 属性建立逻辑归属关系。全选按钮本身是独立的 <input type="checkbox">，它不参与提交，只控制其他 checkbox 的 checked 状态。
实操建议：
- 所有待控制的复选框必须有相同的
name值（比如name="item"），但value各不相同 - 全选框可以不设
name，或设为不同值（如name="select-all"），避免和数据项混淆 - 不要依赖
class来批量操作——DOM 查询慢、易冲突；优先用document.querySelectorAll('input[name="item"]')
JavaScript 中如何同步勾选状态
监听全选框的 change 事件，再遍历目标复选框批量赋值 checked。注意：不能只读取全选框的 checked 就直接赋值，还要处理“部分勾选时全选框显示为 indeterminate”的视觉反馈。
常见错误现象：indeterminate 状态没手动设置，导致全选框在部分勾选时仍显示为纯勾/纯空，失去语义。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听全选框的
change：设置所有目标框的checked为当前值 - 监听每个目标框的
change：统计已勾选项数，若全勾则selectAll.checked = true；若全未勾则false；否则selectAll.indeterminate = true - 别忘了重置
indeterminate：设为false再设checked，否则可能残留中间态
为什么用 name 而不用 class 或 data- 属性
表单提交时，浏览器原生只按 name 收集 checkbox 数据；用 name 作为分组标识，既符合语义，又与 DOM 操作、后端解析保持一致。混用 class 容易在复杂页面中误选其他无关 checkbox。
性能影响：
-
querySelectorAll('[name="item"]')比getElementsByClassName快，且返回静态 NodeList，更可控 - 如果复选框数量超 500 个，建议加防抖或用事件委托（但 checkbox change 不支持冒泡到父级，得用
click捕获 + 判断 target）
反选功能怎么安全实现
反选不是简单地对每个 checkbox 执行 !box.checked，而要避开全选框自身。否则点一次“反选”，全选框也会被翻转，逻辑错乱。
实操建议：
- 反选按钮绑定的函数里，只操作
name="item"的复选框，明确排除name="select-all" - 反选后需重新校验全选框状态：调用一次统计逻辑（同上），更新
indeterminate和checked - 避免直接操作
element.click()触发事件循环——用box.checked = !box.checked更干净
indeterminate 的手动清理和全选框自身的隔离。一旦目标复选框里混入了其他用途的 checkbox（比如筛选条件），name 分组就失效了——这时候就得换用 data-group + 显式 query，但那是另一层约束了。 
