后端返回的默认值未在单选按钮生效，根本原因是浏览器仅依据html中静态checked属性决定初始选中状态，js运行时设置checked=true不改变已渲染结果；同时需确保同组单选按钮name完全一致、value字符串精确匹配（含空格/编码）、label正确绑定对应id。
为什么后端返回的默认值没在单选按钮上生效
常见现象是：接口返回 selected_theme: "dark"，但页面加载后，name="theme" 的单选组里依然是第一个（或没任何选中）。根本原因不是 JS 没执行，而是 HTML 渲染时已按静态 checked 属性定下初始状态，JS 后续赋值会被覆盖或忽略。
浏览器只认 HTML 中是否写了 checked 属性来决定“初始默认值”。哪怕你用 document.querySelector('input[value="dark"]').checked = true 在 DOMContentLoaded 之后执行，也改变不了这个事实——因为 DOM 已渲染完成，该属性只是运行时状态，不参与初始渲染逻辑。
- 服务端模板（如 EJS、Django）必须根据后端数据动态插入
checked：比如<input type="radio" name="theme" value="dark" data.theme="==" :>> - 纯前端渲染（如 React/Vue）应避免手写
checked，改用绑定：:checked="theme === 'dark'"或defaultChecked={theme === 'dark'}（注意：React 中defaultChecked只影响首次挂载） - 若用原生 JS 渲染，需在插入 HTML 字符串前就拼好
checked，而不是先插入再遍历设置
同一组 radio 的 name 值不一致导致默认值“失效”
后端返回了正确的 theme: "dark"，但页面上所有单选按钮都没被选中——大概率是这些 <input type="radio"> 的 name 值不统一。比如一个写 name="theme"，另一个写 name="Theme"（大小写敏感），或漏写了 name，又或者误加了空格变成 name=" theme "。
name 不一致，浏览器就认为它们不属于同一组，也就谈不上“互斥”和“默认选中哪个”。此时即使你在多个 radio 上都加了 checked，也不会冲突，但用户能同时点选全部，表单提交时也会把所有选中的 value 都发出去（违反单选语义）。
- 检查所有同组 radio 的
name是否完全相同（包括大小写、无前后空格） - 确保每个 radio 都有
name，不能只靠 CSS 类或 data 属性分组 - 后端返回的默认值字段名（如
theme）必须与前端name值严格对应，否则找不到匹配项
value 值编码/空格/特殊字符引发匹配失败
后端返回 selected_size: "L (Large)"，但前端 radio 的 value="L (Large)" 却没被选中。问题往往出在 value 字符串里含空格、括号、中文或全角符号，而 JS 字符串比较时未做归一化处理，或模板引擎自动转义了引号/括号。
更隐蔽的情况是：后端用了 URL 编码（如 L%20%28Large%29）或数据库字段带不可见字符（如零宽空格），前端拿到后直接比对 value === response.size 就会失败。
- 统一使用英文下划线或短横线命名 value，避免空格和括号：
value="large"而非value="L (Large)" - 前后端约定 value 为纯 ASCII 字符串，禁止中文、emoji、全角标点
- JS 动态匹配时加 trim() 和 decodeURIComponent()：
el.value.trim() === decodeURIComponent(data.size).trim()
label 绑定错误让“看起来没选中”
实际 DOM 中某个 radio 已被正确设为 checked，但用户点击 label 文字却没反应，或点了别的 radio 才触发——这会让开发者误判“默认值没生效”，其实是 label 没绑对目标。
典型错误是所有 label 的 for 属性都指向同一个 id（比如全写成 for="theme-option"），而只有第一个 radio 有该 id，其余 radio 的 id 各不相同却没人引用。结果就是：点任意 label 都只操作第一个 radio，掩盖了默认值其实已生效的事实。
- 每个
label的for必须精确等于其配对input的id值 - 推荐用隐式包裹方式：
<label><input type="radio" name="theme" value="dark"> 深色模式</label>，彻底规避 id 绑定疏漏 - 检查控制台是否有重复 id 报错，或用 DevTools 查看 label 的 for 属性是否真能找到对应 input
checked 是否已落在正确的 input 上。最容易被忽略的是 name 分组一致性与 value 字符串的干净程度——这两处出错，后端传再多数据也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
