刷新后单选按钮未记住选中，根本原因是html中未根据数据动态生成checked属性；浏览器仅依据初始dom中的checked属性决定默认选中状态，js后续赋值无法替代该静态声明。
刷新后单选按钮没记住选中？不是 JS 没写对，是 HTML 没写对
页面刷新后单选按钮恢复默认（甚至全不选），根本原因不是 JavaScript 保存失败，而是初始渲染时 checked 属性压根没动态生成——浏览器只认加载那一刻 DOM 里有没有 checked，JS 后续赋值或修改 value 都不影响初始状态。
服务端模板里怎么动态加 checked？看 value 决定谁带属性
CRUD 场景下编辑页必须根据数据库字段值，为对应 <input type="radio"> 显式添加 checked。不能靠 JS 补救，也不能把逻辑丢给前端判断。
- 错误写法：
<input type="radio" name="status" value="active">—— 没checked，永远不默认选中 - 正确写法（以 Jinja2/Django 模板为例）：
<input type="radio" name="status" value="active" if item.status="=" endif> - 同理，
value="inactive"的那个也要加判断：{% if item.status == 'inactive' %}checked{% endif %} - 同一
name组里只能有一个checked，否则浏览器只取第一个，后端模板必须确保条件互斥
前端 JS 能不能“补救”刷新后的状态？能，但只在特定条件下有效
如果服务端无法动态渲染（比如纯静态 HTML + AJAX 加载数据），才考虑用 JS 在 DOMContentLoaded 后手动设置 .checked = true。但要注意：这不能替代 HTML 中的 checked，因为用户手速快、网速慢时可能看到“闪一下再选中”。
- 必须等 DOM 加载完成再操作：
document.addEventListener('DOMContentLoaded', () => { ... }) - 不能只设
checked = true就完事，得先清掉同组其他项：document.querySelectorAll('input[name="mode"]').forEach(r => r.checked = false);，再设目标项 - 若用
setAttribute('checked', 'checked')，注意它只影响 HTML 属性，不触发 DOM 属性同步；应直接操作.checked布尔属性 - 别忘了：这个方案无法解决“用户刷新前刚改了选项但还没发请求”的场景——那部分状态仍需靠
localStorage+ 表单监听来兜底
为什么 localStorage 存了 value 还是没用？因为你没在加载时回填 checked
存 localStorage.setItem('gender', 'female') 很容易，但光存没用——下次页面加载，DOM 里还是没有 checked。必须配合 JS 主动查找并设置。
- 读取后要立即匹配：
const saved = localStorage.getItem('gender'); const target = document.querySelector(`input[name="gender"][value="${saved}"]`); - 匹配到才设：
if (target) target.checked = true; - 没匹配到（比如选项变更）就什么都不做，避免误选；不要 fallback 到第一个 radio
- 这个逻辑必须放在 DOM 加载后、用户交互前执行，否则 label 高亮、表单验证等都可能出错
最常被忽略的一点：哪怕你用了 Vue 或 React，只要服务端返回的是纯 HTML（非 SSR），初始 checked 依然得由模板生成。框架的响应式绑定只管运行时，管不了首次渲染那一刻浏览器看到的是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
