事件委托实现表格行选择与全选同步，核心是将click监听绑定在tbody或table上，通过event.target识别checkbox并区分单行/全选操作；维护selectedRows数组作为唯一数据源，结合indeterminate状态精准控制UI。
事件委托在数据表格中实现行选择与全选同步，核心是把点击监听绑定在表格（tbody 或 table）上，而不是每行或每个复选框，再通过事件对象的 target 判断是否点击了某行的 checkbox，并统一更新状态和 UI。
监听容器，识别目标元素
将 click 事件绑定到 tbody（推荐）或整个 table，避免为每行动态添加的 checkbox 重复绑定。利用 event.target 检查是否为 checkbox 元素，再进一步判断是行内单个勾选框，还是表头的“全选”框：
- 用
target.matches('input[type="checkbox"]')快速过滤有效点击 - 通过
target.closest('tr')获取所在行，区分是普通行还是表头（thead中的 checkbox） - 若点击的是表头 checkbox，触发全选/取消全选逻辑；否则视为单行操作
维护统一的数据状态源
不要只靠 DOM 状态（如 checked 属性）驱动逻辑，应维护一个 JS 数组（如 selectedRows = []）作为唯一真相源：
- 每行需有唯一标识（如
data-id或后端返回的id字段），点击时用它增删selectedRows - 全选时，遍历所有行数据，把所有 ID 加入数组；取消全选则清空数组
- 每次变更后调用
updateUI()同步所有 checkbox 的checked和indeterminate状态
正确处理“半选”（indeterminate）状态
全选框不仅要有 checked，还要反映当前“部分选中”状态。这需要在每次单行操作后重新计算：
- 设
totalRows = 表格行数，selectedCount = selectedRows.length - 若
selectedCount === 0→ 全选框checked = false，indeterminate = false - 若
selectedCount === totalRows→checked = true，indeterminate = false - 否则 →
checked = false，indeterminate = true（视觉上显示横线）
同步更新所有相关 checkbox
每次状态变更后，批量更新 DOM，避免逐个操作带来性能问题或不一致：
- 用
document.querySelectorAll('tbody input[type="checkbox"]')拿到所有行 checkbox - 遍历它们，根据其所在行的 ID 是否在
selectedRows中，设置.checked - 单独获取表头 checkbox，按上述规则设置
.checked和.indeterminate - 可加
requestAnimationFrame批量提交，提升滚动中点击的响应感
不复杂但容易忽略：务必在初始化时就根据已有数据设置好全选框状态和各行 checkbox，否则首次渲染就不同步。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
