radio互斥仅由name属性决定，name相同则互斥，id和class无关；label推荐隐式包裹绑定；value必须明确设置，否则提交空字符串；js操作需手动重置同组其他选项。
radio 互斥靠 name 属性，不是靠 id 或 class
多个 <input type="radio"> 要互斥（即只能选一个），唯一且必需的条件是它们的 name 属性值完全相同。浏览器只认这个，id 和 class 对互斥逻辑毫无影响——哪怕 id 相同，只要 name 不同，照样各自独立可选。
常见错误是复制粘贴时忘了改 name，结果看起来像一组，实际分属不同组；或者误以为加了 required 就能强制互斥，其实它只保证「该组至少选一个」，不解决多选问题。
-
name值必须严格一致：大小写、空格、引号类型（name="gender"和name='gender'等效，但name="Gender"就是另一组） - 同一页面可存在多组 radio，只要
name不同即可，比如name="color"和name="size" -
id必须唯一，仅用于关联<label></label>或 JS 操作，和互斥无关
label 标签绑定 radio 的两种写法及推荐方式
点击文字选中 radio，靠的是 <label></label> 与 input 的正确绑定。有两种合法方式：
- 显式绑定：给
input设id="age_18"，对应label加for="age_18" - 隐式包裹：把
input直接写在label标签内部，无需id和for
推荐用隐式包裹，代码更紧凑、不易出错。显式绑定容易漏写 id 或拼错 for 值，导致点击文字无效。
<label><input type="radio" name="plan" value="basic"> 基础版</label>
value 值决定提交内容，空 value 会提交空字符串
表单提交时，radio 组最终提交的是被选中项的 value 属性值，不是显示文字。如果漏写 value，浏览器默认提交空字符串 ""，后端很可能收不到有效标识。
- 不要依赖
label文字作为数据源，它只用于展示 -
value应为简洁、无空格、可预测的字符串，比如value="monthly"，避免value="每月付费（含税）" - JavaScript 读取选中值用
document.querySelector('input[name="plan"]:checked')?.value，注意空值判断
JS 动态控制 radio 选中状态的注意事项
用 JS 设置 checked 属性时，不能只设 input.checked = true，必须确保同一 name 下其他 radio 先设为 false，否则可能出现视觉上多个选中（尤其旧版 Safari 或某些框架渲染异常）。
更稳妥的做法是直接操作 DOM：document.querySelectorAll('input[name="theme"]') 遍历并重置，或用 querySelector 找到目标后统一处理。
- 设置前先清除同组其他选项：
document.querySelectorAll('input[name="theme"]').forEach(i => i.checked = false) - 避免用
setAttribute('checked', 'checked')，它不触发浏览器原生互斥行为 - Vue/React 等框架中，应通过响应式数据驱动，而非直接操作
checked
name 和 value。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
