radio分组唯一依赖name属性值完全一致；name相同则自动成组且单选互斥，name缺失、大小写错误或空格下划线混用会导致分组失效，value须不同以标识选项，动态操作时需显式设置name。
radio 的分组完全依赖 name 属性值是否相同
HTML 中 <input type="radio"> 本身没有“组”概念，浏览器只看 name 属性：所有 name 值相同的 radio 自动构成一组，同一时间只能选中其中一项。
常见错误是漏写 name、拼写不一致（比如 gender 和 Gender）、或用空格/下划线混用（user_type vs user type），导致看似同组实则分裂成多个独立单选组。
-
name必须完全一致（区分大小写、不可含空格） - 不同组必须用不同
name，哪怕语义相近（如payment_method和delivery_option不能共用一个 name） - 不设
name的 radio 永远无法与其他 radio 互斥，相当于“孤儿单选框”
name 相同但 value 不同才能体现选择差异
仅靠 name 分组还不够——如果所有 radio 的 value 都一样（比如全写成 value="on"），提交后后端收不到实际选项信息，因为表单只提交被选中项的 name=value 对。
正确做法是让每项 value 具有业务含义：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" name="theme" value="light"> 浅色模式<br><input type="radio" name="theme" value="dark"> 深色模式<br><input type="radio" name="theme" value="auto"> 自适应
-
value是提交给服务器的实际值，不是显示文本；显示文本用紧邻的<label> - 未设置
value时默认为"on"，极易造成后端误判 - 前端 JS 获取选中值时，也是读取
document.querySelector('input[name="theme"]:checked')?.value
JS 动态操作时 name 一致性容易被忽略
用 JS 动态插入 radio 或批量修改属性时，常有人只改 id 或 value，却忘了同步维护 name。结果新插入的 radio 看似结构一致，实际因 name 缺失或错位，无法与原有选项互斥。
- 动态创建时务必显式赋值
el.name = "xxx"，不要依赖复制旧节点（可能漏掉 name） - 用
querySelectorAll('input[type="radio"][name="xxx"]')检查当前组成员数，比肉眼数更可靠 - Vue/React 中若用 v-for / map 渲染，确保每个 item 的
name绑定的是同一个字符串变量，而非拼错的字段名
form 表单提交和 FormData 获取都依赖 name 分组逻辑
浏览器原生表单提交、FormData 构造、甚至 useFormState（React）底层，都是按 name 收集值。radio 组里只有被选中的那一项会进入提交数据，其余同名项被忽略——这是规范行为，不是 bug。
- 提交时若没选任何 radio，整个
name键不会出现在表单数据中（不像 checkbox 可能传空数组） - 测试时可用
console.log(new FormData(form).get("theme"))直接验证后端将收到什么 - 服务端接收时，应把
theme当作必填字段处理，并校验是否在预设枚举值内（"light"/"dark"/"auto"）
name 是 radio 分组唯一的、不可绕过的控制点，写错一个字符，就等于新建了一个组——这种问题往往在测试阶段才暴露，且难以一眼定位。
