怎样在HTML表格中添加复选框全选功能？JS控制INPUT状态-html教程-PHP中文网

全选功能需监听表头复选框的change事件并用checked属性同步tbody内复选框状态，同时监听tbody委托的子项change事件动态设置全选框的checked和indeterminate值，并在dom加载后立即校验初始状态。

怎样在html表格中添加复选框全选功能？js控制input状态

怎样用JavaScript给表格复选框加全选功能？

直接上手：全选功能的核心是监听表头复选框的 change 事件，再批量同步所有行内复选框的 checked 状态。别用 click——它在键盘操作（空格键切换）时不会触发，而 change 更可靠。

常见错误现象：document.querySelectorAll('input[type="checkbox"]') 会把全选框自己也包含进去，导致“全选→取消→再全选”时状态错乱；或者用 setAttribute('checked', true)，但这是设置 HTML 属性，不反映实际 DOM 状态，后续读 el.checked 仍为 false。

全选框建议放在 <thead> 的第一个 <code><th> 内，行复选框统一放在 <code><tbody> 的每个 <code><td> 中 <li>获取目标复选框时，用 <code>document.querySelectorAll('tbody input[type="checkbox"]') 明确排除表头
赋值必须用 el.checked = true/false，不是 setAttribute 或 className
监听事件绑定在全选框上，不要用事件委托——简单场景没必要，反而容易漏掉初始状态同步

如何让“全选框”自动响应子项勾选状态？

用户手动勾选部分行后，全选框应该变成“半选”（indeterminate）或“未全选”。浏览器原生支持 indeterminate 状态，但它只是视觉提示，不影响 checked 值，且必须通过 JS 设置，不能靠 HTML 属性。

关键点：每次子复选框变化时，要重新计算已勾选项数量。不能只靠“全选/全不选”二值判断——那是错误逻辑。

监听所有行复选框的 change 事件（推荐委托到 tbody，避免重复绑定）
统计 checked 为 true 的个数：const checkedCount = [...rows].filter(cb => cb.checked).length
若 checkedCount === 0 → 全选框 checked = false，indeterminate = false
若 checkedCount === rows.length → 全选框 checked = true，indeterminate = false
否则 → checked 保持 false，设 indeterminate = true

为什么用 `querySelectorAll` 而不用 `getElementsByName`？

因为 name 属性容易重复或缺失，且 getElementsByName 返回的是 HTMLCollection，不支持展开运算符和 filter；而 querySelectorAll 返回静态 NodeList，可直接转数组、链式调用，语义也更清晰——我们找的是“tbody 里的 checkbox”，不是“叫 xxx 的元素”。