javascript实现全选与子项双向联动：监听全选框change事件批量设置子项checked属性，同时监听每个子项change事件遍历判断是否全部勾选以更新全选框状态，需避免单向绑定、使用click代替change、错误选择器及setattribute设置checked等常见问题。
怎么用 JavaScript 绑定全选 checkbox 和子项 checkbox 的状态联动
核心是监听全选框的 change 事件，再批量设置所有子项的 checked 属性；同时每个子项也要监听自己的 change，动态更新全选框是否“真全选”。不能只靠一次赋值，得双向响应。
常见错误是只做单向绑定（比如点了全选就勾上全部，但取消任意一个子项时全选框却不自动取消），或者用 click 代替 change 导致在键盘操作（空格切换）时失效。
- 全选框必须有唯一
id或name，方便用document.getElementById()或querySelector获取 - 所有子项 checkbox 建议统一加一个 class（如
class="item-check"），便于用document.querySelectorAll('.item-check')批量获取 - 不要用
setAttribute('checked', true)，直接改elem.checked = true—— 后者才是控制实际状态的正确方式
为什么子项 change 事件里要遍历判断所有 checkbox 的 checked 状态
因为“全选”不是“有多少个被勾了”，而是“是否全部都被勾了”。哪怕只漏一个，全选框就必须取消。所以每次子项变动，都得检查是否还存在未勾选的项。
性能上没问题：100 个 checkbox 遍历一次也就几微秒；但如果子项数量上千，可以加个计数器缓存已勾选数量，避免每次都遍历——不过绝大多数业务场景不需要这么早优化。
- 别用
Array.prototype.every()判断所有是否为 true，它会在第一个 false 就退出，逻辑正确但可读性略低；显式循环 +break更直观 - 注意 DOM 可能还没加载完，确保脚本在
DOMContentLoaded后执行，或把 script 放在 body 底部 - 如果子项是异步渲染（比如 Vue/React 动态生成），得在数据更新后手动触发状态同步，不能只靠初始绑定
反选功能怎么安全地实现而不破坏当前全选状态逻辑
反选不是“把全选框设为 false 再挨个 toggle”，而是对所有子项执行 !elem.checked，然后重新计算全选框状态。否则容易出现全选框显示勾选、实际部分子项却没被操作的问题。
典型坑是：先全选 → 反选 → 此时所有子项都未勾选，但全选框仍显示勾选（因为没重新校验）。
- 反选操作后，必须再跑一遍“检查是否全选”的逻辑，更新全选框的
checked - 不要用
document.querySelectorAll('input[type="checkbox"]')拿全部 checkbox —— 它会把全选框自己也包括进去，导致逻辑错乱；明确限定 class 或 name - 如果页面有多个全选组（比如不同表格），记得给每组加独立的容器和作用域，避免事件监听或查询互相干扰
IE 和旧版 Safari 下 checkbox 的 checked 属性行为差异
IE9+ 和现代浏览器一致，但 IE8 及更早版本中，elem.checked 是只读属性，得用 elem.setAttribute('checked', 'checked') 和 elem.removeAttribute('checked')；不过现在基本没人兼容 IE8 了。
真正容易被忽略的是 Safari 12 之前版本：当 checkbox 被 JS 设置 checked = true 后，若用户立刻用鼠标点击取消，有时会触发两次 change，导致状态错乱。稳妥做法是在事件处理函数开头加防抖或标记位：
let isHandling = false;
item.addEventListener('change', () => {
if (isHandling) return;
isHandling = true;
// …处理逻辑
setTimeout(() => isHandling = false, 0);
});
这种边界情况虽少见，但在金融或表单提交类场景里，一旦出错就是数据不一致，得提前兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
