根本原因是没用name属性把它们归到同一组；浏览器只认name相同的radio为一组，name必须完全一致（大小写、空格均敏感），否则每个radio独立，导致看似多选实则未生效。
radio 单选框为什么点了多个还能同时选中？
根本原因是没用 name 属性把它们归到同一组。浏览器只认 name 相同的 <input type="radio"> 为一组，同一组内才强制单选。如果漏写 name，或拼写不一致（比如 gender 和 Gender），每个 radio 都是独立个体，自然可以多选。
常见错误现象：
- 页面上明明是“男/女”选项，却能同时勾选两个
- 表单提交后，后端只收到一个值，但前端看起来选了俩（其实是没生效）
- 用 JavaScript 读
document.querySelector('input[name="xxx"]:checked')总是返回null
name 值必须完全一致，大小写和空格都敏感
name 是纯字符串匹配，没有自动 trim 或忽略大小写逻辑。哪怕只是多一个空格、下划线换成短横线，就分属不同组。
实操建议：
- 统一用小写字母 + 连字符（
user-preference），避免驼峰或下划线 - 在 Vue/React 等框架中，确保动态生成的
name值不带意外空格（比如name={`option-${id} `}尾部有空格就失效） - 检查 DevTools 中每个 radio 的实际
name属性值，别只看变量名或注释
错误示例：
<input type="radio" name="fruit" value="apple"><input type="radio" name="Fruit" value="banana"><!-- 大小写不同，两组 --><input type="radio" name="fruit " value="orange"><!-- 末尾空格，单独一组 -->
value 属性决定提交时发送什么，不是显示文字
很多人误以为 value 是用户看到的标签，其实它只用于表单提交或 JS 获取值。显示文字得靠紧邻的 <label></label>，或者 aria-label。
使用场景与注意事项：
- 后端接收的是
value字符串，不是 label 文本，所以别写value="男"同时又用英文 label —— 中文 value 可能引发编码或校验问题 - 如果要用数字 ID 作 value（如
value="123"），确保后端能正确映射回业务含义 - 禁止省略
value：没有value的 radio 提交时默认发字符串"on"，极易造成歧义
用 label 包裹或 for 关联，否则点击文字无法选中
radio 本身很小，直接点中难。必须通过 <label></label> 把文字和控件绑定，否则用户只能精准点击那个小圆圈。
两种合法写法：
- 包裹式（推荐）：
<label><input type="radio" name="theme" value="dark"> 暗色模式</label>
- for/id 关联式：
<input type="radio" name="theme" value="light" id="light-theme"><label for="light-theme">亮色模式</label>
容易踩的坑：
-
for值写错 ID（比如 ID 是theme-light，for写成light-theme）→ 点击无效 - 多个 radio 共用同一个
id→ HTML 不合法，部分屏幕阅读器行为异常 - 用
aria-labelledby替代for时，目标元素必须存在且可访问
name 属性看着简单，但它是 radio 分组逻辑的唯一依据；一旦出错，表现就是“该单选的没单选”，而排查时又容易盯着 CSS 或 JS 去找问题——其实先打开 Elements 面板，逐个核对 name 值是否真的一致，往往三秒定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
