radiogroup不是标准html属性,现代浏览器完全忽略它;单选组互斥唯一依赖name属性,同name值的radio自动构成一组,name为空或不一致则无法互斥。

radiogroup 属性不是标准属性,在任何主流浏览器中都不生效。
它只短暂出现在早期 HTML5 草案里,关联已废弃的 <command></command> 标签,现代 HTML 规范(HTML5.3+)早已移除。你写 radiogroup="group1" 在 <input type="radio"> 上,浏览器会完全忽略——既不触发互斥行为,也不报错,就像没写一样。
为什么 name 属性才是唯一可靠方案
单选组的互斥逻辑由浏览器原生实现,但触发条件只有一个:同名的name 属性值。
- 只要多个
<input type="radio">的name值相同,它们就自动构成一组,选中一个时其他自动取消 -
name是强制要求,不设或为空字符串会导致该 radio 无法参与任何单选逻辑(即永远无法被“组内互斥”) - 不同
name值之间绝对隔离,哪怕 DOM 结构上被同一个父容器包裹,也互不影响
常见误用场景与后果
开发者常因命名混淆或框架误导踩坑:
- 在 Vue/React 中手动用
v-model或useState管理多个 radio 的checked,却忘了统一name—— 结果是视觉可点,但点击无互斥,表单提交时可能多个 value 同时上报 - 看到某些 UI 库文档写 “支持
radiogroup”,其实是库内部自定义属性(如 HarmonyOS 的group参数、uni-app 的<radio-group></radio-group>组件),和 HTML 原生无关 - 用 CSS 选择器写
input[radiogroup="x"]试图样式化,结果匹配不到任何元素
各平台/框架中的真实替代方案
不要试图“修复” radiogroup,直接用对应平台的正确机制:
- Web 原生:只靠
name,别加多余属性 - Material-UI:
<radiogroup name="xxx"></radiogroup>只是语义包装,最终仍渲染出带相同name的原生 radio - HarmonyOS:
Radio({ group: "xxx" })是声明式 API,底层由系统保障组内互斥,与 HTMLradiogroup无关 - Android:
<radiogroup></radiogroup>是 ViewGroup 容器,其互斥逻辑在 Java/Kotlin 层实现,不依赖任何 HTML 属性
name 且 checked 为 true 的 radio 才会作为键值对发送**。如果只靠 JS 控制状态而漏掉 name,后端根本收不到这个字段。










