radio按钮不互斥的首要原因是name属性不一致，必须完全相同（含大小写、无空格）；默认选中用checked布尔属性；value提交依赖name正确且radio在form内；label绑定需用for与id显式关联。
radio 按钮不互斥？检查 name 属性是否一致
单选按钮失效，最常见原因是 name 值写错了——哪怕只差一个空格、大小写不一致，浏览器就认为是两组独立控件。html 的分组逻辑只认 name，跟 id、class 或位置完全无关。
-
name必须完全相同（包括大小写、无多余空格），例如都用name="gender"，不能一个写name="gender"，另一个写name="Gender" - 不同组的 radio 必须用不同
name，比如name="theme"和name="language"不能混用 - 服务端接收时也靠
name取值，前后端要对齐，别前端写name="user_type"，后端却按userType解析
怎么让某 radio 默认选中？用 checked 属性就行
checked 是布尔属性，存在即生效，不需要赋值。它只控制初始状态，JS 修改时用 element.checked = true，不是设属性字符串。
- HTML 中直接写
<input type="radio" name="level" value="pro" checked>（注意：不要写checked="true"） - 同一组里只能有一个
checked，多个会以最后一个为准（但这是不可靠行为，应主动避免） - 如果 JS 动态插入 radio，记得用
.checked = true而不是.setAttribute('checked', '')，后者在某些旧版 Safari 下可能不触发表单逻辑
value 值没传过去？确认表单提交方式和字段名
radio 的 value 是唯一提交给服务端的内容，但前提是它被选中且表单正常提交。常见漏点不在 HTML 结构，而在上下文。
- 确保 radio 在
<form></form>标签内，否则不会随表单提交 - 检查是否有 JS 阻止了默认提交（如
event.preventDefault()），又没手动收集name对应的选中值 - 调试时打开浏览器开发者工具的 Network → Payload，看实际发出的参数里有没有对应
name字段；没有就说明没选中，或name写错 - PHP/Node.js 等后端读取时，用的是
$_POST['xxx']或req.body.xxx，字段名必须和 radio 的name完全一致
移动端点击区域太小？别只靠 label 包裹
单纯把 <input> 套进 <label></label> 不一定能扩大点击热区，尤其当样式重置过或用了 flex 布局时。真正可靠的方案是显式绑定。
- 给每个
<input>设唯一id，再让<label></label>的for属性指向它，例如<input id="opt_a" name="choice" value="a"><label for="opt_a">选项A</label> - 避免用
display: none隐藏 radio，这会让 label 失效；改用position: absolute; opacity: 0; width: 1px; height: 1px;等可访问性友好的隐藏方式 - 如果用 CSS 自定义外观（比如用伪元素画圆点），务必保留原生
<input>的可交互性，别把它pointer-events: none掉
name 拼写错误和 label 绑定失效占了 radio 问题的八成以上。别急着查框架或 polyfill，先对着 Elements 面板逐个核对 name 和 id/for 是否严丝合缝。 
