所有待控制的 checkbox 必须共用同一 name 值（如 name="user_role"），全选按钮 name 需独立（如 name="select_all_toggle"）；监听 change 事件，用 every() 判断全选状态，遍历时跳过 disabled 项。
如何用 name 属性正确分组多选框
表单里多个 <input type="checkbox"> 要实现“全选/取消全选”，前提是它们属于同一逻辑组——而浏览器只认 name 相同的 checkbox 为一组。别依赖 class 或 data-* 属性来“模拟分组”，JS 无法靠它们批量操作状态。
常见错误是给每个 checkbox 写了不同 name（比如 name="item1"、name="item2"），结果 document.querySelectorAll('input[name="xxx"]') 根本查不到多个元素。
- 所有待控制的 checkbox 必须共用同一个
name值，例如name="user_role" - 全选按钮本身不能和这些 checkbox 共享
name，否则提交时会混入冗余值 - 如果页面有多个独立多选区域（如“权限组A”“权限组B”），每组用不同
name，互不干扰
全选按钮该用 checkbox 还是 button
用 <input type="checkbox"> 当全选开关最省事：它天然支持 checked 状态，点击即翻转，且语义正确；用 <button> 需手动维护视觉状态、处理键盘交互（空格键）、并额外写 aria-checked 逻辑。
但要注意：这个全选 checkbox 的 name 必须和目标组不同，否则提交时会把它也当数据项发出去。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐结构：
<input type="checkbox" id="select-all-roles">+<label for="select-all-roles">全选</label> - 目标组 checkbox 不要设
id，用name批量选：document.querySelectorAll('input[name="user_role"]') - 避免给全选框加
name，或明确设为无关值（如name="select_all_toggle"）
监听 change 还是 click？事件绑定位置在哪
必须监听目标 checkbox 组的 change 事件，而不是 click。因为用户可能用键盘（空格键）操作，click 在某些浏览器中不会触发；而 change 在状态真正改变后才触发，更可靠。
全选按钮自身也要监听 change，但不要在每个子 checkbox 上单独绑定事件——性能差且易漏绑。用事件委托或直接遍历更稳。
- 子项监听：给父容器（如
<fieldset>）绑定change，再用e.target.matches('input[name="user_role"]')过滤 - 全选监听：直接给全选 checkbox 绑
change，然后批量设置.checked属性 - 别在循环里反复调用
querySelectorAll，查一次缓存起来
同步状态时绕不开的三个细节
全选按钮的 checked 状态不是简单“看有多少子项被选中”，而是取决于是否“全部选中”。反过来，子项变化后，全选框也不能只靠数量判断——比如 5 个子项，当前选中 3 个，全选框应为未选中；但如果用户手动取消一个，剩下 2 个，全选框仍不该变。
- 判断全选状态：用
Array.from(checkboxes).every(cb => cb.checked)，不是checked.length === checkboxes.length - 设置子项状态：直接赋值
cb.checked = selectAll.checked，不要用toggle()，避免状态错乱 - 注意 disabled checkbox：它们的
checked属性可读但不可写，遍历时需跳过cb.disabled的项，否则报错或无效
disabled 元素常被忽略，但一旦存在，every() 就会返回 false，导致全选框无法勾上——哪怕其余所有可操作项都已选中。
