单选按钮组必须使用相同name属性才能实现互斥选择，id和class对单选逻辑无效；value需显式设置且服务端必须校验枚举值。
单选按钮组必须用相同 name 属性
浏览器靠 name 属性识别哪些 <input type="radio"> 属于同一组。如果 name 不同，哪怕视觉上排在一起，也能各自独立选中。
常见错误是复制粘贴时漏改 name，比如写成：
<input type="radio" name="gender1" value="male"><input type="radio" name="gender2" value="female">
这实际是两个互不干扰的单选按钮，不是“组”。正确写法是：
<input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"><input type="radio" name="gender" value="other">
不要用 id 或 class 控制单选逻辑
id 只用于唯一标识和 <label for="xxx"></label> 关联，class 仅用于样式或 JS 选择，它们对单选行为完全无效。
以下写法毫无作用：
<input type="radio" id="opt1" class="group-a" value="a"><input type="radio" id="opt2" class="group-a" value="b">
即使 class 相同，只要 name 不同，就无法互斥。别被 CSS 类名误导。
JavaScript 强制互斥是多余且危险的
有人试图用 JS 监听 change 事件，手动清除其他选项 —— 这不仅多此一举，还可能破坏原生行为（如空格键切换、回车确认、辅助技术支持）。
除非你有特殊交互需求（比如动态禁用/启用某选项），否则不要干预原生单选逻辑。原生 name 机制已足够可靠。
如果真要 JS 控制，也只应在必要时操作 checked 属性，例如：
document.querySelector('input[value="male"]').checked = true;
但注意：这不会触发浏览器原生的组内互斥检查，必须确保目标 name 一致，否则可能留下多个 checked 状态。
表单提交时值为空？检查是否设置了 value
单选按钮未选中时提交值为 undefined；选中后提交的是对应 value 字符串。如果没写 value，默认值是 "on"，容易造成后端解析混乱。
务必显式设置有意义的 value：
-
value="yes"而非留空 -
value="1"比value="true"更稳妥（避免字符串比较歧义） - 所有同
name的 radio 都应有value，包括“无选项”项（如value=""或value="none"）
另外，如果想默认选中一项，用 checked 属性即可，无需 JS：
<input type="radio" name="theme" value="dark" checked>原生单选组的约束力只来自
name，其余属性只是补充。最容易被忽略的是：服务端必须校验该字段是否在预期枚举值内 —— 因为前端 name 可被开发者工具随意篡改。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
