name属性值必须完全一致才能形成有效分组，大小写、空格、连字符等任何差异均导致分组失效；value重复不影响互斥但造成语义丢失；label绑定仅扩展点击区域，不参与分组；required只需加在同组任一单选按钮上即可防止空提交。
name属性值必须完全一致才能形成有效分组
浏览器判断单选按钮是否互斥，只看name属性的字符串是否字面量相等——大小写、空格、连字符、下划线，任何差异都会导致分组失效。比如name="theme"和name="Theme"是两组；name="plan"和name=" plan"（开头有空格）也是两组；name="user-type"和name="user_type"同样不匹配。
常见错误包括：后端接口约定接收status，前端却写了userStatus；复制粘贴时漏改某个name；模板渲染时变量未正确插值，导致部分按钮name为空或为undefined。
作用范围不是靠位置（比如是否在同一个<div>或<code><table>里）决定的，哪怕按钮分散在页面不同区域，只要<code>name相同，就属于同一组。
value值重复会导致语义丢失，但不影响互斥逻辑
两个input[type="radio"]可以共用同一个name且互斥，但如果它们的value也一样（比如都设为value="on"），提交时服务端收到的就只是name=on，无法区分用户实际点了哪个选项。
这在动态生成表单时尤其危险：循环渲染时忘记给value赋唯一值，或误用布尔字符串（如全写value="true"而没配对value="false"）。
建议：value应直接映射业务标识，例如value="vip"、value="basic"；避免含空格或特殊字符（如value="VIP member"），若必须使用，需确保服务端做URL解码处理。
label绑定不影响分组，但决定点击是否生效
label标签本身不参与name分组，它的作用纯粹是扩展可点击区域。如果label没正确绑定到对应input，用户点文字就毫无反应，容易被当成 bug。
两种可靠写法：
-
<input id="opt1" type="radio" name="agree" value="yes"><label for="opt1">同意</label>（显式绑定，for必须严格等于id） -
<label><input type="radio" name="agree" value="yes">同意</label>（隐式绑定，无需id，但input必须在label内部）
千万别出现多个label都指向同一个id，或者label的for值根本不存在于任何input的id中——这种情况下，点击可能总是触发第一个 radio。
required属性只能加在一个按钮上，且仅防空提交
想强制用户二选一，只需给同组任意一个input[type="radio"]加上required即可。浏览器会阻止表单提交，并高亮提示“请填写此字段”，前提是该组当前没有任何选项被选中。
注意：required不会阻止用户取消已选中的项（除非你额外监听并禁用取消行为）；它也不影响 JS 动态修改checked状态；更不能替代服务端校验。
服务端必须检查：name参数是否存在、是否为预设合法值之一、且不能接受多个同名参数（虽然 HTTP 通常只取第一个，但不能依赖这个行为）。
最易被忽略的一点：name分组是在 HTML 解析阶段就完成的，跟 JS 执行顺序、CSS display: none、或 DOM 插入时机完全无关。哪怕你用 JS 把某个 radio 改成disabled或hidden，只要它还在 DOM 中且name匹配，它就仍属于该组——只是用户暂时无法操作而已。
