HTML复选框默认不选中只需省略checked属性；checked是布尔属性，存在即选中，不存在即未选中；JavaScript应设elem.checked=false而非removeAttribute；表单reset()恢复HTML初始状态；框架中应通过v-model或state控制，避免直接操作DOM。
HTML复选框默认不选中的写法
复选框默认不选中，是它的自然行为——只要你不加 checked 属性，它就一定不被选中。很多开发者误以为要显式设置 checked="false" 或 checked="" 来“取消”，其实这反而会让它变成选中状态。
-
checked是布尔属性：存在即为 true，不存在即为 false -
<input type="checkbox">—— 默认未选中（推荐写法） -
<input type="checkbox" checked>—— 默认选中 -
<input type="checkbox" checked="">或<input type="checkbox" checked="false">—— 依然选中（浏览器忽略值，只看属性是否存在）
JavaScript 动态取消复选框选中状态
运行时想让已选中的复选框变回未选中，不能靠移除 checked 属性，而应操作 DOM 属性 checked 的布尔值。
- 正确做法：
elem.checked = false - 错误做法：
elem.removeAttribute('checked')—— 这不会改变当前勾选状态，只删了初始声明 - 验证方式：
console.log(elem.checked)返回true/false，比读getAttribute('checked')更可靠
const cb = document.getElementById('my-checkbox');
cb.checked = false; // 立即取消勾选
表单重置时复选框恢复默认状态的逻辑
当调用 form.reset() 时，复选框会回到 HTML 中声明的初始状态：有没有 checked 属性，就决定重置后是否勾选。
- 如果 HTML 写的是
<input type="checkbox" id="cb1">，重置后一定不选中 - 如果写的是
<input type="checkbox" id="cb1" checked>，重置后一定选中 - JS 设置的
checked = false可被reset()覆盖，但手动删checked属性不会影响重置行为
Vue/React 等框架中容易混淆的点
在响应式框架里，直接操作 DOM 的 checked 属性常被绕过，导致视觉与数据不一致。
立即学习“前端免费学习笔记（深入）”；
- Vue 中应绑定
v-model到布尔变量，而不是手动改elem.checked - React 中应通过
setState更新受控组件的checkedprop - 混合使用原生 JS 修改 + 框架绑定，极易出现“点了没反应”或“状态来回跳”
最稳妥的方式：只让框架控制状态，避免在事件处理中直接碰 input.checked。
