加了 checked 却没选中最常见原因是 JS 或框架覆盖初始状态：Vue 中 v-model 忽略 checked，React 需 checked + onChange 配合，动态插入须先挂载再设 .checked，form.reset() 仅还原 HTML 声明的 checked 状态。
为什么加了 checked 却没选中
最常见原因不是 HTML 写错了，而是后续 JS 或框架覆盖了初始状态。比如页面加载后执行了 el.checked = false；Vue 中写了 <input type="checkbox" checked v-model="flag">，此时 checked 属性被完全忽略，只看 flag 初始值；React 中用了 defaultChecked 但没配 checked + onChange，导致变成非受控组件，用户点一次后状态就脱钩。
动态插入的复选框（如通过 innerHTML 或 createElement）也容易踩坑：在元素还没挂载到 DOM 前就设 .checked = true，无效。必须先插入再赋值。
form.reset() 会重置复选框到什么状态
它只还原到页面加载时 HTML 中声明的 checked 属性是否存在，不是还原到 defaultChecked，也不是还原到 JS 曾经设过的值。
也就是说：
立即学习“前端免费学习笔记（深入）”；
- 如果 HTML 里写了
<input type="checkbox" name="opt" checked>，form.reset()会让它保持勾选 - 如果没写
checked，哪怕你 JS 里设过el.checked = true，reset 后也会取消勾选 - 如果用
setAttribute('checked', '')动态加的属性，reset 也会认——因为浏览器解析时已把它当作初始状态的一部分
手动设置复选框初始状态的可靠方式
直接操作 .checked 属性是唯一同步 DOM、影响提交、触发浏览器原生逻辑的方式。
适用场景包括：表单动态生成、需要根据条件初始化、或配合自定义 reset 逻辑。
示例：
const cb = document.querySelector('input[name="newsletter"]');<br>cb.checked = localStorage.getItem('newsletter') === 'true';
注意点：
- 不要混用
setAttribute('checked', '')和.checked = false，前者只是加属性，后者才真正改变状态 - 对同一组复选框批量操作时，避免用
querySelectorAll后逐个赋值，应先收集 name，再按需设值 - 服务端渲染（SSR）页面中，若初始值来自后端，建议用
data-属性传值，再由 JS 读取并设.checked
reset 按钮和 form.reset() 的兼容性差异
两者行为一致，但触发方式不同：<input type="reset"> 必须在 <form> 内部才有效，且会触发 reset 事件（可 preventDefault() 阻止）；form.reset() 是纯 JS 调用，更灵活，但不自动触发 reset 事件（需手动 dispatch）。
关键限制：
- 都不重置通过 JS 修改但未同步到属性的值（比如只改了
.value没调setAttribute('value', ...)） - 都不清理自定义验证状态（如
setCustomValidity），需手动调el.setCustomValidity('') - 在 Shadow DOM 中，
form.reset()可能不生效，需遍历内部slot或使用elementInternals（现代方案）
复杂表单里，别依赖原生 reset 行为来兜底——初始状态一旦被 JS 干预过，就得自己记、自己管。
