全选按钮通过name属性建立逻辑归属关系，而非class或data属性；所有受控复选框需统一name值（如name="item"），全选框name应不同（如name="select-all"）；监听其change事件批量设置目标框checked，并同步更新indeterminate状态以准确反映部分选中情况。

全选按钮怎么绑定到一组复选框

关键不是靠 class 或 name 硬匹配，而是用 name 属性建立逻辑归属关系。全选按钮本身是独立的 <input type="checkbox">，它不参与提交，只控制其他 checkbox 的 checked 状态。

实操建议：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 所有待控制的复选框必须有相同的 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，但那是另一层约束了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！