事件委托在多选复选框中通过监听父容器change事件实现，避免重复绑定；利用event.target精准识别复选框，支持实时响应或批量获取已选项。
事件委托在多选复选框列表中，核心是监听父容器的 change 事件，而不是给每个 <input type="checkbox"> 单独绑定，从而避免动态增删项时反复绑定/解绑，也提升性能。
监听父容器的 change 事件
复选框触发 change 事件的时机明确（用户真正勾选/取消时），比 click 更可靠。只需为包裹所有复选框的父元素（如 <ul></ul>、<div class="checkbox-list">）绑定一次事件：
<ul>
<li>确保父容器有稳定且唯一的标识（如 <code>id 或 class）
event.target 判断是否点击的是复选框，并验证其 type === 'checkbox'
event.currentTarget 去找父级——直接用 event.target 最精准快速收集所有已勾选项（实时或批量）
有两种常用场景：
-
实时响应单个操作：在
change回调里，直接读取event.target.checked和event.target.value（或dataset.id），立刻更新状态或发送请求 -
批量获取当前全部勾选项：用
document.querySelectorAll('.checkbox-list input[type="checkbox"]:checked')一次性提取 —— 简洁、无副作用、兼容性好（IE9+）
例如：const checkedValues = Array.from(document.querySelectorAll('.my-list input[type="checkbox"]:checked')Java免费学习笔记（深入）”；
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
配合 data 属性管理业务数据
避免依赖 DOM 结构或文本内容，给每个复选框添加语义化 data- 属性：
<input type="checkbox" value="101" data-user-id="u_789" data-role="admin">- 在事件处理中通过
event.target.dataset.userId或event.target.dataset.role拿到结构化数据 - 这样即使界面改版（比如把
value改成索引），业务逻辑也不受影响
注意 name 属性和表单提交的兼容性
如果复选框属于一个 <form></form>，且需要原生提交，记得统一设置 name（如 name="selectedIds"）。浏览器会自动将所有勾选的同名复选框值作为数组提交。事件委托不影响该行为，但 JS 手动收集时无需关心 name，只看 :checked 状态即可。
