radio可同时选中是因为name属性值不一致；浏览器仅依据name是否完全相同（含大小写、空格等）判断分组，name缺失、拼写错误、动态生成差异或模板绑定错误均会导致分组失效。
radio同时选中是因为name属性不一致
浏览器判断radio是否属于同一组，只看name属性值是否完全相同：大小写、空格、下划线、连字符都算不同。只要有一个radio漏写name，或写成gender和Gender，它们就不是一组，互不干扰——于是可以同时被选中。
常见错误包括：
-
name拼写不一致（比如user_typevsusertype） - 动态生成时用变量拼接出不同值（如
name="opt_${i}"导致每个radio的name都不同） - 复制代码时删掉了某个
name，但忘了补上 - 模板引擎里绑定错了字段，比如Vue中写了
:name="item.name"却该用groupName
检查当前radio组实际成员数
别靠肉眼数，用开发者工具控制台一行命令就能验证分组是否生效：
document.querySelectorAll('input[type="radio"][name="theme"]').length
如果返回0，说明没找到任何name="theme"的radio；返回1说明只有一个，根本构不成“单选组”；只有≥2才可能触发互斥逻辑。
顺便确认是否真有type="radio"：
document.querySelectorAll('input[name="theme"]').forEach(el => console.log(el.type))
如果混进了type="checkbox"或type="text"，也会破坏预期行为。
JS动态操作时name容易被忽略
用JS插入或修改radio时，常只改value或id，却忘了同步设name。结果DOM里看着像一组，实际name为空或错位。
正确做法是显式赋值：
const el = document.createElement('input');<br>el.type = 'radio';<br>el.name = 'theme'; // 必须写<br>el.value = 'dark';<br>el.checked = true;
批量更新已有元素时，别只用setAttribute('value', ...)，也要补上el.name = 'theme'；用querySelectorAll选中后统一处理更稳妥。
默认选中失效往往和name冲突有关
如果写了checked但没生效，先排除name问题：多个radio共用同一个name是前提，否则checked只是独立状态，不触发排他。
还要注意：
-
checked是布尔属性，存在即生效，不要写checked="false"（这反而会选中） - 同组里多个
checked时，浏览器通常以HTML中最后一个为准，但这不可靠，应主动保证仅一个有该属性 - JS执行时机问题：如果脚本在DOM加载前运行，
document.querySelector('input[name="x"]:checked')会返回null
真正难排查的是嵌套导致的解析错乱——比如没闭合，浏览器容错机制可能把后续所有radio都包进这个label里，点击标题就清空整组。这种错误不会报JS异常，但会让交互完全失常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
