全选/反选需监听表头复选框change事件，用queryselectorall(".row-checkbox")精准获取目标控件，通过event.target.checked读实时状态，用.checked=true/false赋值；反选时须逐个翻转每行状态并校验checkbox存在性。
怎么用 JavaScript 绑定表格全选/反选事件
核心是监听表头复选框的 change 事件，再批量操作 tbody 中所有行的复选框。不要直接遍历 tr 再找 input[type="checkbox"]，容易漏掉 disabled 或嵌套结构里的控件。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给表头复选框加唯一标识，比如
id="check-all"，tbody 中每行复选框统一用class="row-checkbox" - 用
document.querySelectorAll(".row-checkbox")获取全部目标复选框，比getElementsByTagName("input")更精准 - 监听时用
event.target.checked判断当前是勾选还是取消，别用getAttribute("checked")—— 它返回的是初始 HTML 属性，不是实时状态 - 设置
checkbox.checked = true/false，而不是setAttribute("checked", "checked")，后者不触发 DOM 状态更新
反选逻辑为什么不能只用 !checked
全选状态下点一次“反选”，确实该全不选；但若当前是部分勾选，再点反选，应把已勾的变未勾、未勾的变已勾——这时候不能只读表头 checkbox 的 checked 值取反，得逐个翻转每行的状态。
常见错误现象：Uncaught TypeError: Cannot set property 'checked' of null，往往是因为某行没有复选框，或 class 名写错导致 querySelectorAll 返回空数组。
实操建议：
- 反选前先做存在性判断：
if (checkbox && checkbox.type === "checkbox") { checkbox.checked = !checkbox.checked; } - 避免用
for...in遍历 NodeList，改用for (let i = 0; i 或 <code>checkboxes.forEach() - 如果表格支持分页或动态加载，记得每次渲染后重新绑定，或用事件委托（监听 tbody，判断
e.target.classList.contains("row-checkbox")）
如何让全选框自动响应行内勾选变化
用户手动勾选几行后，表头“全选”框应该变成半选（indeterminate）状态；全勾上就变实心；全取消就变空。这个状态不会自动同步，必须手写逻辑维护。
关键点：
-
indeterminate是一个独立于checked的属性，设为true会显示短横线，但不会影响checked值 - 每次行内 checkbox 变化时，统计：已勾数
checkedCount、总数total - 然后设置：
checkAll.checked = checkedCount === total；checkAll.indeterminate = checkedCount > 0 && checkedCount - 注意：设置
indeterminate = true后，checked值会被忽略，所以必须先设checked，再设indeterminate
IE8 兼容或无 JS 环境下怎么降级处理
纯 HTML/CSS 实现不了真正的全选反选，但可以降低体验损失：
- 表头复选框加
title="按住 Ctrl 多选行内复选框"，提示基础操作方式 - 禁用 JS 时，隐藏“全选/反选”按钮，只保留单行操作，避免功能误导
- 如果必须支持 IE8，别用
querySelectorAll，改用getElementsByClassName（需配合 polyfill 或自己遍历getElementsByTagName过滤 class） - 避免使用
forEach，改用传统 for 循环；addEventListener要 fallback 到attachEvent（注意this指向）
复杂点在于状态同步和 indeterminate 的视觉反馈——浏览器原生支持有限，真要兼容老版本，不如直接放弃半选样式，用文字提示代替。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
