全选按钮点击无反应需检查事件是否绑定到checkbox元素本身而非label；querySelectorAll返回空需核对类名和DOM加载时机；反选后状态错乱须同步checked与indeterminate属性。
全选按钮点击没反应？检查 onclick 是否绑定到正确元素
常见错误是把事件绑在 <label> 或文字上，而不是 <input type="checkbox"> 本身。浏览器对 label 的点击行为虽会触发关联 checkbox，但 JavaScript 的 onclick 不一定自动冒泡或生效。务必确保事件监听器加在全选框（如 id="checkAll"）上，或者用 addEventListener 显式绑定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById("checkAll").onclick = function() { ... }最直接 - 若用 jQuery，写成
$("#checkAll").on("click", ...)，避免用.click(...)在动态插入的元素上失效 - 不要依赖
<input onclick="toggleAll()">内联写法——调试困难，且容易因引号嵌套出错
querySelectorAll 选不到多选框？确认选择器语法和 DOM 加载时机
写 document.querySelectorAll(".item-checkbox") 却返回空 NodeList，大概率是两个原因：类名不一致（比如实际是 class="checkbox-item"），或脚本执行时 DOM 还没加载完。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的
Elements面板右键目标 checkbox → “Copy” → “Copy selector”，粘贴出来直接用，最保险 - 脚本放在
</body>前，或包装在DOMContentLoaded里：document.addEventListener("DOMContentLoaded", () => { /* 你的代码 */ }); - 别用
getElementsByClassName—— 返回的是实时 HTMLCollection，遍历时删元素可能出错；querySelectorAll返回静态 NodeList，更可控
反选/取消全选后状态错乱？关键在同步 indeterminate 和 checked
全选框应该有三种视觉状态：全勾（checked=true, indeterminate=false）、全不勾（checked=false, indeterminate=false）、部分勾（checked=false, indeterminate=true）。漏设 indeterminate 会导致 UI 与逻辑脱节。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次更新子项后，立刻计算：
const items = document.querySelectorAll(".item-checkbox");<br>const checkedCount = [...items].filter(cb => cb.checked).length;<br>const allCheck = document.getElementById("checkAll");<br>allCheck.checked = checkedCount === items.length;<br>allCheck.indeterminate = checkedCount > 0 && checkedCount < items.length; -
indeterminate是只读属性，只能通过 JS 设置，不能写在 HTML 里 - 别用
allCheck.setAttribute("indeterminate", true)—— 这不会生效，必须用点号赋值
移动端点击区域太小？用 CSS 扩展可点击范围而非改 input 尺寸
直接放大 <input type="checkbox"> 会导致样式崩坏、iOS 上出现默认蓝边、甚至触发缩放。真正有效的做法是保留原生 checkbox 隐藏它，用相邻的 <label> 承担点击区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CSS 中写：
input[type="checkbox"] { position: absolute; opacity: 0; }<br>input[type="checkbox"] + label { padding-left: 28px; cursor: pointer; }<br>input[type="checkbox"] + label::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 1px solid #999; } - 确保 HTML 结构是
<input id="a"><label for="a">选项A</label>，for和id必须严格匹配 - 不要用
transform: scale(1.5)拉伸 checkbox —— 会破坏点击热区比例，尤其在高 DPI 屏幕上
全选逻辑本身简单，但 DOM 同步、状态映射、移动端适配这三块最容易被跳过测试，一上线就暴露。特别是 indeterminate 状态，不手动设就永远显示“全不勾”，用户根本不知道当前是部分选中。
