事件委托实现多选框批量勾选，核心是监听父容器点击事件，通过target判断是否为checkbox，区分全选与普通选项并同步状态，利用indeterminate模拟三态。

事件委托实现多选框批量勾选，核心是监听父容器的点击事件，通过事件对象的 target 判断是否点击了复选框（input[type="checkbox"]），再根据点击目标的类型（普通 checkbox 或“全选”checkbox）统一控制所有选项的状态。

监听父容器，而非每个 checkbox

避免为每个复选框单独绑定事件，把事件监听器挂载在它们共同的父元素（如 <ul>、<div class="list">）上。这样新增或删除选项时无需重新绑定事件，也更节省内存。

• 用 document.querySelector('.checkbox-list') 获取父容器
• 调用 .addEventListener('click', handler) 绑定点击事件
• 确保父容器能包含所有相关复选框（包括“全选”项）

区分点击目标：全选 vs 普通选项

在事件处理函数中，先检查 e.target 是否为 checkbox 元素，再判断它是否是“全选”控件（例如通过 class="select-all" 或 data-role="select-all" 标识）。

• 若点击的是“全选”框：checked 状态直接同步给所有其他 checkbox
• 若点击的是普通选项：checked 状态变化后，更新“全选”框的勾选状态（全选/半选/不选）
• 注意排除非 checkbox 的点击（如文字、空白区域），可用 e.target.type === 'checkbox' 过滤

同步“全选”状态：三态逻辑要清晰

“全选”框实际应支持三种视觉状态（勾选、未勾选、中间态），但原生 checkbox 只有两态。可通过 indeterminate 属性模拟中间态，表示部分选项被选中。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

立即学习“Java免费学习笔记（深入）”；

• 获取所有普通 checkbox：list.querySelectorAll('input[type="checkbox"]:not(.select-all)')
• 统计已勾选数量：Array.from(boxes).filter(cb => cb.checked).length
• 设全选框：selectAll.checked = checkedCount === boxes.length；selectAll.indeterminate = checkedCount > 0 && checkedCount

HTML 结构建议（简洁可扩展）

结构清晰有助于逻辑判断。推荐使用语义化 class 区分角色：

<div class="checkbox-list">
  <label><input type="checkbox" class="select-all"> 全选</label>
  <label><input type="checkbox" name="item" value="1"> 选项一</label>
  <label><input type="checkbox" name="item" value="2"> 选项二</label>
  <label><input type="checkbox" name="item" value="3"> 选项三</label>
</div>

这样既能保证样式可维护，又方便 JS 精准选取和判断。