要实现 radio 的互斥单选效果，其 name 属性必须保持一致。同一组 radio 的 name 值需要完全相同，包括大小写与空格；而每个 radio 的 value 值则应分别设置，用来标识不同选项。当某个 radio 没有被选中时，对应的 name 字段不会提交到表单数据中。
radio 的 name 属性必须相同才能互斥
要让多个 组成一组单选按钮，核心不在于 class 或 id，而是同组 radio 的 name 属性值必须完全一致（包括大小写和空格）。浏览器正是通过这个字段来判断这些 radio 是否属于同一个单选组。
常见错误包括拼写不一致，例如：name="gender" 与 name="Gender" 会被识别为两组；或者遗漏 name 属性，导致每个 radio 都能被单独选中，无法实现单选互斥。
name值建议使用小写字母加下划线，尽量避免空格和特殊字符- 即使
id不同、value不同，甚至分散在不同 DOM 位置，只要name相同，就会形成同一组单选 - 表单提交到服务端时，也是通过这个
name作为字段名来接收对应的值
怎么给 radio 设置不同 value 但共享同一个 name
name 决定 radio 的分组与单选逻辑，value 决定表单实际提交的内容。同一组 radio 必须使用相同的 name，但每个选项的 value 应该各不相同，否则后端无法准确判断用户最终选择了哪一项。
例如性别选择：
男
女
其他
提交表单时，只有当前被选中的那个 value 会和 name="gender" 一起发送，例如 gender=female。
- 不要为多个 radio 设置相同的
value，除非业务上确实需要多个选项映射到同一个值 value最好使用简洁、无空格、无中文的字符串，便于后端处理和程序解析- 如果没有显式设置
value，浏览器默认提交on，很容易引起数据歧义
JavaScript 操作 radio 组时为什么 document.querySelector('input[name="xxx"]') 只拿到第一个？
这是因为 querySelector 只会返回第一个匹配到的元素。若要获取整组 radio，应使用 querySelectorAll 或 getElementsByName。
比如想判断当前选中的是哪一项：
const radios = document.querySelectorAll('input[name="theme"]');
const selected = Array.from(radios).find(r => r.checked);
if (selected) console.log(selected.value);document.getElementsByName("theme")返回的是 HTMLCollection，通常需要先转成数组再使用find等方法- 设置默认选中项：可以直接给某个 radio 添加
checked属性，或通过 JS 设置radio.checked = true - 如果要清空当前选择，需要遍历该
name对应的所有 radio，并统一设置checked = false
form 表单提交时 radio 没传值？可能漏了这些细节
最常见的原因是：没有任何一个 radio 被默认选中，同时用户也没有手动选择——这种情况下，整个 name 字段不会出现在提交数据里。注意，这不是提交了 null，而是该字段根本不存在。
- 建议至少为一个 radio 设置
checked属性（如），或者通过 JS 在页面初始化时指定默认值 - 确认 radio 位于 form 表单内部；如果 radio 在 form 外部，且没有通过
form属性建立关联，也同样不会被提交 - 注意浏览器兼容性：
name属性在现代浏览器中都能正常控制 radio 单选分组，但旧版 IE 对空name的处理并不稳定，因此不要留空
name 属性看似简单，实际上它同时承担了 DOM 分组依据、表单提交字段名以及 JavaScript 查询入口这三项关键作用。只要这个字符串写错一个字母、大小写不一致，或者多一个空格，整组 radio 的单选逻辑和提交结果都可能失效。
