name属性不一致是单选按钮失效的最常见原因，浏览器仅依据name字符串字面量（区分大小写、空格、点号、方括号）分组，任何差异都会导致视觉同组实则分裂为多组，无法互斥或回显。
name属性不一致是最常见原因
浏览器只靠name字符串字面量分组，大小写、空格、点号、方括号差异都会让同视觉组的input[type="radio"]变成多组。比如name="user[gender]"和name="profile.gender"看似语义相近，但完全不互斥，checked也互不影响。
调试时别只看模板逻辑，直接打开开发者工具 → Elements 面板，逐个检查每个input的name属性原始值（右键 → “检查”，看实际渲染出的字符串），尤其注意：
- 服务端变量拼接是否引入了换行或空格（如
name="{{ prefix }}gender"中prefix为空） - Laravel/Thymeleaf等模板里
{{ $lo->name }}返回含空格的字符串（如"Critical Thinking"），导致name="gradeCritical Thinking"被截断为gradeCritical - 前后端约定名不一致：前端写
name="role"，后端期待user_role
checked属性存在但没生效？检查是否用了JS覆盖
checked是布尔属性，只看是否存在，不看值：checked、checked=""、checked="false"效果一样——全算选中。真正“不选中”是彻底不写这个属性。
但JS运行时设el.checked = true可能白忙活，因为：
- 脚本执行太早：在
里跑，DOM还没加载；必须等DOMContentLoaded或用setTimeout(() => {}, 0)延后 - 框架干扰：Vue/React里直接操作原生
checked属性不会触发响应式更新，得同步改绑定的数据变量 - UI库劫持：Bootstrap Switch、iCheck等会隐藏原生
input，此时改.checked毫无意义，得调对应API，如$('input').bootstrapSwitch('state', true)
label绑定错误导致点击失效，误判为“没选中”
radio能显示但点不了？不是默认选中问题，是交互链断了。根本原因是label的for属性没和input的id严格一一对应。
典型错误包括：
- 多个
input共用同一个id（如都叫male），点击label随机激活其中一个 -
label写了for="xxx"，但页面里根本没有id="xxx"的input - 用
<label><input></label>嵌套，但内部有未闭合标签（如<h3>Gender<h3></h3> </h3>），浏览器容错解析把后续所有radio都包进去了
修复原则：每个radio配唯一id（推荐加前缀，如lo_1_gender_male），对应label的for必须完全匹配，区分大小写。
异步加载后手动回显时漏掉关键步骤
fetch回来数据，想让radio按服务端值自动选中？浏览器不会帮你匹配value并设checked，你得亲手干。
常见疏漏：
- 只设
el.checked = true，没先清掉同组其他项的checked状态，导致DOM里多个checked属性并存（虽然视觉上只一个高亮，但表单提交时后端可能收到多个同名参数） - 用
setAttribute('checked', '')而非el.checked = true，后者更可靠，尤其在旧版Safari下 - 遍历用
document.querySelectorAll('input[name="x"]')，但没过滤:not(:disabled)，结果禁用项也被设了checked，启用后意外激活 - DOM还没挂载就执行回显逻辑，或元素被
display: none遮住，querySelector找不到目标
真正容易被忽略的是：name分组发生在HTML解析阶段，跟JS是否执行、CSS是否加载无关。一旦初始HTML里name写错，后面所有JS补救都是在修表象，不是治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
