限制单选依赖浏览器原生机制，即同组 radio 的 name 属性值必须完全一致（大小写、空格、拼写均敏感），且同一组内 value 值须唯一；label 仅影响点击区域，不参与分组；服务端必须校验 name 是否存在、是否合法、是否唯一。
能限制只能选一个，根本不是靠 JavaScript 或 CSS 控制，而是浏览器原生行为——只要 name 属性值完全一致，就自动互斥。
name 必须完全相同（大小写、空格、拼写全对）
浏览器只比对 name 字符串是否字面量相等，任何差异都会导致分组失效：
-
name="theme"和name="Theme"→ 两组，可同时选 -
name="plan"和name=" plan "（带空格）→ 两组 -
name="user-type"和name="user_type"→ 两组 - 前后端约定的
name值必须严格统一，比如后端期待status，前端就不能写成userStatus
同一组内 value 必须不同，且提交时只发选中项的 value
表单提交时，只有被选中的那个 input[type="radio"] 的 value 会作为键值对发送（key 是 name，value 是该 radio 的 value）。如果两个 radio 的 value 相同，虽然仍能互斥，但服务端无法区分用户到底选了哪个。
常见错误：
- 复制粘贴时漏改
value，导致多个 radio 共享相同value="on" - 用布尔值字符串如
value="true"表达“开启”，但没配对写value="false"，造成语义断裂 - value 含空格或特殊字符（如
value="VIP member"），未 URL 编码，可能被截断或解析异常
label 绑定不等于 name 分组，但影响可用性
label 不参与互斥逻辑，但它决定用户能否点击文字触发选择。没绑定好，就会出现“只能点小圆圈、点不了文字”的体验断层：
- 推荐写法：
<input type="radio" id="opt1" name="agree" value="yes"><label for="opt1">同意</label> - 更简洁写法：
<label><input type="radio" name="agree" value="yes">同意</label>（隐式绑定，无需id/for） - 没写
id也没嵌套label？那点击文字完全无效，容易被当成 bug 报
checked 默认选中与服务端校验缺一不可
checked 是纯前端提示，不影响提交逻辑；它只是告诉浏览器“初始状态谁该亮”。但用户可以取消选择（除非加 required），此时整个 name 键在 POST 数据里就消失了。
- 要强制二选一，必须加
required（仅对其中一个 radio 加即可） - 前端禁用/隐藏未选 radio 是障眼法，绕过 JS 就能提交任意值
- 服务端必须验证：接收到的
name参数是否存在、是否为预设合法值之一、且不能有多个同名参数（HTTP 规范下通常只取第一个，但不能依赖这个行为）
最易被忽略的点：name 分组是 HTML 解析阶段就确定的，跟 DOM 加载顺序、JS 执行时机、CSS 显隐状态全无关系。错一次 name，整组就废——修的时候别查 JS，先 Ctrl+F 搜所有 name=。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
