checked属性仅定义复选框初始状态，刷新后按HTML重新解析；要持久化用户选择需用localStorage等手动存取，并在框架中绑定响应式数据，避免直接操作DOM。
checked 属性只管初始状态，刷新后必然重置
HTML 的 checked 属性不是“记忆开关”，它只在页面首次解析时生效。只要用户手动取消勾选，再刷新页面，浏览器会重新读取 HTML 中的 checked 属性——如果它还存在，就又变回选中；如果被 JS 移除了，就恢复未选中。这不是 bug，是规范行为。
常见误解是以为加了 checked 就能“记住”用户选择。实际上，它和 value 一样，只定义初始值，不参与后续状态管理。
-
checked是布尔属性：写checked、checked=""、checked="true"效果相同；checked="false"也照样选中（因为属性存在即生效） - JS 动态设置必须用
element.checked = true，而不是setAttribute('checked', 'checked')—— 后者只影响初始渲染，且可能与 DOM 状态不同步 - 如果复选框没写
name，即使checked存在，表单提交时也不会发送该字段
想保留用户选择，必须自己存状态
要让刷新后仍保持用户上次操作的结果，得把选择状态存起来，下次加载时主动还原。浏览器原生不提供这个能力。
最轻量方案是用 localStorage：
立即学习“前端免费学习笔记（深入）”；
- 监听复选框变化：
checkbox.addEventListener('change', () => { localStorage.setItem('agree', checkbox.checked) }) - 页面加载后读取并设置：
const saved = localStorage.getItem('agree') === 'true'; checkbox.checked = saved - 注意：不要直接赋
checkbox.checked = localStorage.getItem('agree')，因为返回的是字符串"true"或null，需显式转布尔
服务端场景下，应由后端在渲染 HTML 时动态插入 checked 属性（比如用户已同意条款，则模板里输出 <input type="checkbox" name="agree" checked>），而不是靠前端 JS 补救。
框架里别直接操作 checked，否则状态脱节
React、Vue 等框架中，checked 应绑定到响应式数据上，例如 React 的 checked={isChecked} + onChange 更新状态。直接改 DOM 的 checked 属性会导致视图与组件 state 不一致，后续 re-render 可能覆盖你的修改，或触发警告。
同理，不要在框架中混用 document.querySelector 手动设 checked，除非你明确知道自己在绕过响应式系统。
- React：用
useState管理 checkbox 状态，JSX 中通过checkedprop 控制 - Vue：用
v-model或:checked.sync，避免直接操作element.checked - Angular：用
[(ngModel)]或响应式表单的FormControl
reset() 或 type="reset" 按钮会无视你存的 localStorage
如果你用了 <input type="reset"> 或调用了 form.reset()，它只还原 HTML 初始状态（即 checked 属性是否存在），完全不管 localStorage 里存了什么。用户点“重置”后，所有 checkbox 会回到页面刚加载时的样子，而不是上次的选择。
要让 reset 按钮也尊重用户偏好，就得拦截默认行为：
- 给 form 绑定
onreset="event.preventDefault(); restoreFromStorage(); return false;" - 或用 JS 监听
reset事件，先event.preventDefault()，再手动还原 localStorage 中的状态 - 注意：还原时既要设
checked = true/false，也要同步更新对应元素的checked属性（用setAttribute或removeAttribute），否则下次点原生 reset 还会出错
真正麻烦的不是怎么存，而是边界情况太多：初始渲染、用户交互、刷新、重置、框架更新……每个环节都得对齐状态源，漏掉一个就会表现异常。
