radio互斥仅由name属性决定，name相同才构成一组；默认选中用checked属性而非JS模拟；获取值应使用querySelector('input[name="xxx"]:checked')；移动端需用label包裹或for绑定扩大点击区域。
radio必须用相同的name属性才能互斥
浏览器只认name值是否一致来决定一组单选按钮是否关联。哪怕id、value、样式完全一样，只要name不同，就各自独立，可以同时选中。
常见错误是复制粘贴时漏改name，或者用动态生成逻辑但没统一命名：
<input type="radio" name="gender" value="male"> 男<br><input type="radio" name="gender" value="female"> 女<br><input type="radio" name="pref" value="email"> 邮箱通知（⚠️name不同，不参与单选）
默认选中用checked属性，不要用JavaScript模拟
checked是原生布尔属性，写上即生效，比用document.querySelector().checked = true更可靠，尤其在表单重置或 SSR 场景下不会丢失状态。
- 正确：
- 错误：仅靠
onclick或addEventListener设checked，没处理取消其他选项的逻辑 - 注意：
checked属性值无需写="true"，写checked或checked=""都有效
获取选中值要用querySelector查:checked伪类
不能遍历所有radio再判断checked，效率低还容易漏掉未挂载节点。现代浏览器支持直接定位：
const selected = document.querySelector('input[name="plan"]:checked');<br>if (selected) {<br> console.log(selected.value); // 拿到当前选中的value<br>}
关键点：
- 务必限定
name，否则可能跨组误匹配 - 返回
null代表没选中，需判空，别直接调.value - 不要用
getElementsByName配合循环——冗余且易出错
移动端点击区域小？用label包裹或for绑定
原生input[type="radio"]点击热区极小，尤其在手机上极易点不中。最稳妥解法是让文字也响应点击：
<label><br><input type="radio" name="size" value="m"> 中号<br></label><br><label for="size-lg">大号</label><br><input type="radio" name="size" value="l" id="size-lg">
两种写法都有效，但注意：
- 包裹式（第一种）更简洁，
input必须在label内 -
for绑定式要求id与for值严格一致，大小写敏感 - 别只加
padding或font-size试图撑大input本身——多数浏览器不响应
没做点击区域优化的 radio，在 iOS Safari 和部分 Android 浏览器上失效率很高，这个细节常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
