全选/反选核心是监听全选框change事件并同步子项checked属性，同时监听子项change以反向更新全选状态；需用.checked而非setattribute，避免用click，子项为0时全选框应disabled。

全选/反选的核心逻辑

关键在于监听“全选”复选框的状态变化，再批量控制其他选项的 checked 属性。不能只靠点击事件判断是否勾选，而应读取 event.target.checked 的实时值。

HTML 结构要清晰分组

把所有待控复选框放在同一容器中（如 form 或 div），并给“全选”框一个明确的 class 或 id，方便获取：

全选
选项1
选项2
选项3

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

JavaScript 绑定与同步控制

监听全选框的 change 事件（比 click 更可靠，兼容键盘操作）；同时，为每个普通复选框也绑定 change，用于更新全选框状态：

• 当全选框被勾选 → 遍历所有 name="item" 的 checkbox，设 checked = true
• 当全选框被取消 → 全部设为 false
• 当任意子项变动 → 检查是否全部勾选：是则全选框 checked = true；否则设为 false

避免常见坑

不要用 click 替代 change，否则按空格键切换时逻辑会失效；不要直接操作 setAttribute('checked', ...)，应改写 .checked 属性；子项数量为 0 时，全选框应保持未勾选且不可用（可加 disabled 控制）。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南