radio回显失效主因是name不一致、未手动设checked、label关联错误；需确保同组name完全相同，js遍历匹配value后el.checked=true，且label for与input id严格一一对应。
radio 组 name 属性不一致导致回显失效
异步加载数据后，<input type="radio"> 显示未选中，最常见原因是服务端返回的值与前端 radio 的 name 不匹配，或同一组 radio 的 name 实际不统一。浏览器只按 name 分组，name 不同就不是一组，自然无法互斥选中。
比如后端返回 { "gender": "female" }，但前端写了两组 radio：name="user[gender]" 和 name="profile.gender"，哪怕值一样，也无法自动回显。
- 确保所有同组 radio 的
name字符串完全相同（包括大小写、空格、方括号） - 避免动态拼接 name 时引入非法字符（如空格、中文、点号），Laravel 中
grade{{ $lo->name }}遇到"Critical Thinking"会变成gradeCritical Thinking，浏览器截断为gradeCritical，多组全崩 - 推荐用下划线或短横线分隔：如
learning_objective_1_grade，安全且可读
异步渲染后未手动设置 checked 属性
DOM 插入 radio 元素后，浏览器不会自动根据数据“匹配并勾选”——它只认 HTML 初始的 checked 属性，JS 动态插入的元素默认无状态。fetch 回来数据，你得亲手设 input.checked = true。
- 别依赖表单自动回填；
form.reset()或form.dataset都不触发 radio 重置逻辑 - 遍历当前组 radio：
document.querySelectorAll('input[name="gender"]')，比对 value 和服务端返回值，匹配则el.checked = true - 注意：设
checked属性和设checked属性值不同；必须用 JS 属性赋值：el.checked = true，而非el.setAttribute('checked', '')（后者只影响初始渲染）
label for/id 重复或缺失引发点击失效
radio 能显示但点不了？检查 <label for="xxx"></label> 和对应 <input id="xxx"> 是否唯一配对。一旦两组 radio 共用同一个 id（如都叫 male），点击 label 会随机激活其中某个 input，造成“点了没反应”或“点下面却选了上面”的假象。
- 每组 radio 必须有独立的
id前缀，例如lo_1_gender_male、lo_2_gender_male -
for属性值必须与目标input的id完全一致，区分大小写 - 不要把多个
input包在同一个<label></label>里（尤其嵌套<h3></h3>等未闭合标签时，浏览器容错解析可能意外包裹后续所有 radio）
异步加载时机早于 DOM 就绪或样式干扰
脚本执行时 radio 元素还没挂载，或被 display: none / visibility: hidden 遮住，都会导致 querySelector 找不到、checked = true 无效、甚至点击穿透。
- 确保操作 DOM 的代码在
DOMContentLoaded后执行，或把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
