全选框必须用name属性建立逻辑分组，行内复选框统一设name="selected"，全选框不设name或设为不同值；优先用document.querySelectorAll('input[name="selected"]')精准获取目标元素，避免class冲突或动态渲染失效。
全选框怎么绑定到 tbody 中的复选框而不污染 DOM
必须用 name 属性建立逻辑分组，而不是靠 class 或 data- 属性。所有待控制的行内复选框统一设 name="selected"，表头全选框不设 name 或设为不同值（如 name="select-all"）。这样既能避免批量操作误伤其他页面控件，又能让后端原生接收数组：request.form.getlist("selected")。
常见错误现象：document.querySelectorAll(".row-checkbox") 返回空 NodeList，或在复杂布局中选中了非表格区域的 checkbox。原因往往是 class 冲突或动态渲染后未重新查询。
- 优先用
document.querySelectorAll('input[name="selected"]')—— 返回静态 NodeList，性能更好，语义更准 - 不要给每个复选框加
id：动态生成时极易重复，改用data-id="1024"存业务主键 - 全选框放在
<th>内，但复选框本身必须是<td>的子元素（哪怕只是视觉上“看起来在 th 里”）
自定义样式复选框怎么保持全选/反选逻辑正常
自定义样式通常用伪元素（::before/::after）覆盖原生 checkbox，但事件监听和状态读写仍必须作用于原生 <input type="checkbox"> 元素本身。一旦把点击事件绑到外层 <label> 或伪元素容器上，就容易丢失 change 事件触发时机，导致状态不同步。
关键点：样式可换，DOM 操作对象不能换。所有 JS 逻辑（checked 赋值、indeterminate 设置、event.target.checked 读取）都必须针对原生 input 元素。
立即学习“前端免费学习笔记（深入）”；
- 确保
<label>正确绑定：<label><input type="checkbox" name="selected" value="123"></label>，或用for+id - 不要用
click事件模拟切换：input.click()可能触发两次 change（尤其快速连点），改用直接赋值input.checked = true - 自定义样式后，
indeterminate状态需手动设置——它不会自动显示短横线，且必须先设checked再设indeterminate = true
反选逻辑为什么不能只对 checked 取反
反选不是“把全选框状态翻转”，而是“把所有已勾选的变未勾、未勾选的变已勾”。如果直接读 selectAll.checked 然后对每行执行 box.checked = !selectAll.checked，那在部分勾选状态下点一次反选，结果会全部勾上或全部取消，完全违背用户预期。
正确做法是遍历每个目标复选框，单独判断并翻转其当前 checked 值，并跳过全选框自身（避免它也被翻转）。
- 反选函数里只操作
input[name="selected"]，明确排除name="select-all"或无name的控件 - 翻转前校验存在性：
if (box && box.type === "checkbox") { box.checked = !box.checked; }，防止Cannot set property 'checked' of null - 反选后必须重新统计已勾数量，调用一次同步逻辑更新全选框的
checked和indeterminate
移动端点击区域小、状态不同步怎么解决
原生 checkbox 点击热区极小，尤其在手机上极易点空。单纯靠 CSS 扩大 input 尺寸无效，因为浏览器限制 checkbox 实际可点击区域。唯一可靠方式是用 <label> 包裹，并确保 label 内容为空或仅含 checkbox，同时设置 display: block 和足够 padding。
常见错误现象：点击复选框旁边空白处没反应；快速连续点击时状态滞后或错乱。
-
<td><label><input type="checkbox" name="selected" value="101"></label></td>是最简安全结构 - 避免在
label里塞文字或图标——会干扰点击区域判断；纯视觉样式用伪元素实现 - 不要用
for/id绑定方式做动态表格：ID 易重复，改用包裹结构更稳 - 如果表格支持搜索/分页，每次 DOM 更新后必须重新绑定事件，或改用事件委托（监听
tbody，再用e.target.matches('input[name="selected"]')判断）
indeterminate 状态的重置顺序和反选后对全选框状态的二次校验。很多团队只做了“全选/取消”，却漏掉部分勾选时的中间态，导致 UI 语义断裂；而反选后不重新跑一遍统计逻辑，会让全选框停留在错误的 checked 值上，后续操作全部错位。 
