最可靠的方法是用 JavaScript 遍历所有 checkbox 元素并直接赋值 cb.checked = false；避免 setAttribute，注意 DOM 就绪、动态元素、Shadow DOM 和移动端点击体验。
用 JavaScript 直接操作 checked 属性最可靠
浏览器原生不提供“一键取消所有复选框”的 HTML 属性或标签，必须靠 JS 控制。核心是遍历所有 <input type="checkbox"> 并设 checked = false。别用 setAttribute('checked', false) —— 这只会移除属性，但不会影响实际选中状态；只有直接赋值布尔值才生效。
常见错误：用 querySelectorAll('input[type=checkbox]') 但没加 :checked 过滤，结果清空了所有复选框（包括本就没选中的），逻辑冗余但无害；更糟的是漏掉动态插入的复选框，导致它们逃过清理。
- 推荐写法：
document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false); - 如果只清已选中的，可加过滤：
document.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => cb.checked = false);，性能略好但差异极小 - 注意作用域：确保脚本执行时 DOM 已就绪，否则查不到元素；放在
</body>前或用DOMContentLoaded监听
绑定按钮点击事件时避开内联 onclick
在按钮上写 onclick="document.querySelectorAll(...).forEach(...)” 看似简单，但可读性差、无法复用、调试困难，且容易因引号嵌套出错。更严重的是，若页面有多个同类按钮，重复写死逻辑会失控。
正确做法是给按钮加 id 或 class，用外部 JS 绑定事件。这样便于后续扩展（比如加确认弹窗、记录日志、或排除某些复选框）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML：
<button id="clear-checks">取消全部选择</button> - JS：
document.getElementById('clear-checks').addEventListener('click', () => { /* 上面的遍历逻辑 */ }); - 如果按钮在表单里，记得加
type="button"，否则可能触发表单提交（尤其当它是唯一按钮时）
需要排除特定复选框怎么办
实际项目里常有“全选/取消全选”复选框本身，或者某些关键选项（如“我已阅读条款”）不该被一键清除。硬编码排除 ID 或 name 不够灵活，推荐用 class 或 data 属性标记。
例如给不想被清的复选框加 data-protected="true"，遍历时跳过：
document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
if (!cb.hasAttribute('data-protected')) cb.checked = false;
});也可以用 CSS 选择器直接排除：document.querySelectorAll('input[type="checkbox"]:not([data-protected])')，语义更清晰。
- 避免用
name排除——同名复选框通常是一组，排除一个就得排除全部，不符合需求 - 别依赖
id做条件判断，ID 应唯一，不适合批量分类 - 如果复选框在 Shadow DOM 里（如 Web Component），
querySelectorAll默认查不到，得用shadowRoot.querySelectorAll
移动端点击区域太小导致误操作
按钮默认尺寸小，尤其在手机上容易点歪或连点两次。这不是逻辑问题，但直接影响可用性。CSS 调整是最直接解法，无需 JS 干预。
- 给按钮加最小高度：
min-height: 44px;（iOS 触控建议最小尺寸） - 加内边距：
padding: 12px 20px;，比单纯调 font-size 更稳妥 - 禁用用户缩放（防双击放大后错位）：
-webkit-tap-highlight-color: transparent; - 别用
font-size: 0+ 伪元素撑开——会导致屏幕阅读器无法识别按钮内容
真正难处理的是异步加载的复选框：比如表格数据通过 AJAX 加载完才渲染复选框，而清空按钮在 DOM 加载时就绑定了事件。这时候点击按钮可能什么都没清——因为目标元素还没出现。得把清空逻辑封装成函数，在数据加载完成后再调用，或者用事件委托监听父容器。
