全选按钮无反应需检查事件是否绑定到复选框本身；子项不同步应使用indeterminate表达混合态；批量操作卡顿时应缓存节点并用for循环；提交失败多因name缺失或不统一。
全选按钮点击后没反应？检查事件监听是否绑定到正确元素
常见错误是给 document 或错位的容器绑了点击事件，但实际要监听的是那个“全选”复选框本身。它必须是 <input type="checkbox">，且要有明确的 id 或 class 用于 JS 获取。
- 确保全选框有唯一标识，比如
id="selectAll" - 用
document.getElementById("selectAll")获取后，再调用.addEventListener("change", ...) - 不要用
onclick行内属性，容易和 DOM 渲染顺序冲突 - 如果复选框是动态插入的，得用事件委托（监听父容器，判断
e.target是否为全选框）
子复选框状态不同步？别直接读 checked 属性，用 indeterminate 表达混合态
全选框在部分子项选中时，视觉上应显示“中间态”，这靠 indeterminate 实现——它不改变 checked 值，只影响样式。
- 设置
selectAll.indeterminate = true时，selectAll.checked仍为false - 每次子项变动后，需手动计算：全选 →
checked = true；全不选 →checked = false；其余 →indeterminate = true - 注意：iOS Safari 对
indeterminate支持良好，但旧版 IE 不支持，如需兼容可加 CSS 模拟（比如背景图）
批量操作卡顿？避免遍历所有 input[type="checkbox"] 节点
如果页面有几百个复选框，每次点击都用 document.querySelectorAll('input[name="item"]') 查一遍，性能会明显下降。
- 给所有子复选框加统一
class="item-checkbox"，再用document.getElementsByClassName("item-checkbox")（返回 HTMLCollection，比 NodeList 更轻） - 或者维护一个数组缓存所有子复选框节点引用，在初始化时一次性获取并保存
- 全选/取消时，用
for (let i = 0; i < checkboxes.length; i++)循环赋值，比forEach略快（尤其在老浏览器） - 不要对每个子项触发
change事件，除非业务逻辑真依赖它；直接改.checked即可
提交时后端收不到数据？name 属性缺失或命名不一致
HTML 表单提交时，只有带 name 的复选框才会被序列化发送。全选按钮本身通常不需要提交，但子项必须规范。
立即学习“前端免费学习笔记（深入）”；
- 所有子复选框
name必须相同，比如name="user_ids"，否则后端收到的是多个独立字段 - 全选按钮建议不设
name，避免干扰提交逻辑 - 若用 AJAX 提交，用
Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value)提取选中值，更可靠 - 注意：未被选中的复选框默认不会出现在表单数据中，后端不能假设“没出现=全不选”，得靠业务约定（比如显式传空数组）
全选逻辑看着简单，真正上线时最常出问题的不是 JS 写错，而是 DOM 结构松散、name 不统一、或者忽略了 indeterminate 状态下用户再次点击的语义——这时候该清空还是反选，得按产品需求定，JS 里得写清楚分支。
