全选 checkbox 点击后其他行不响应是因为事件冒泡导致状态被覆盖，需在行内 checkbox 的 onclick 中调用 event.stopPropagation()；全选应仅操作 tbody 内 checkbox；反选需支持 indeterminate 状态；移动端应使用 label 包裹 checkbox 并设置 padding 扩大点击区域。
全选 checkbox 点击后其他行 checkbox 不响应
这是因为全选框和行内 checkbox 共用了同一个 onclick 事件，而全选逻辑里直接操作了所有 checkbox 的 checked 属性，但没阻止事件冒泡。点击某一行的 checkbox 时，事件会向上冒泡到 table 或 thead 上绑定的全选监听器，导致状态被覆盖。
解决方法是给行内 checkbox 单独加监听，并在事件处理中调用 event.stopPropagation()：
<input type="checkbox" class="row-checkbox" onclick="event.stopPropagation(); toggleRow(this);">
同时确保全选框只绑定在 thead 中的 checkbox 上，不要委托到父级容器。
JavaScript 实现全选/反选时忽略表头或固定行
表格里常有第一行是表头（thead），最后一行是合计（tfoot），这些行里的 checkbox 不该参与全选逻辑。直接用 document.querySelectorAll('input[type="checkbox"]') 会误选它们。
立即学习“前端免费学习笔记（深入）”；
推荐按位置精准选取：
- 只选
tbody内的 checkbox：document.querySelectorAll('tbody input[type="checkbox"]') - 排除带特定 class 的 checkbox，比如
document.querySelectorAll('input[type="checkbox"]:not(.no-select)') - 如果全选框本身在
thead，它的onclick回调里应只操作tbody子项
反选功能写成 toggleAll() 容易漏掉“半选”状态
用户勾选了部分行后，全选框应该显示为“中间态”（indeterminate），而不是简单地来回切换 checked。否则 UI 和实际状态不一致，反选就变成“全选 → 全不选 → 全选”，失去反选本意。
正确做法分三步：
- 监听所有行 checkbox 的
change事件，统计已勾选数量 - 根据数量动态设置全选框的
indeterminate和checked属性：
– 全勾选 →checked = true,indeterminate = false
– 全未勾选 →checked = false,indeterminate = false
– 部分勾选 →checked = false,indeterminate = true - 反选逻辑应遍历所有
tbody input[type="checkbox"]，对每个执行cb.checked = !cb.checked，再重新计算状态
移动端点击 checkbox 区域太小导致误操作
原生 input[type="checkbox"] 在手机上点击热区很小，用户容易点空或点到相邻单元格。不能只靠增大 font-size 或 width/height，因为部分浏览器不支持直接缩放原生控件。
稳妥方案是用 label 包裹 checkbox，并设置 label 的 display: block 和足够 padding：
<td><label><input type="checkbox" class="row-checkbox"></label></td>
再加 CSS：
label { display: block; padding: 8px 12px; }<br>input.row-checkbox { margin: 0; }
这样整个单元格区域都可触发 checkbox 切换，且不会影响表格布局。
复杂点在于 indeterminate 状态无法通过 HTML 属性初始设置，必须用 JS 动态赋值；还有 Safari 对 indeterminate 的渲染偶尔延迟，需要在 DOM 更新后加一次 offsetHeight 强制重排。
