radio按钮必须用相同name属性分组才能实现互斥选择，name值大小写敏感；value值需不同以区分选项；label需通过for属性或包裹方式关联input提升点击体验；js获取选中值应使用:checked伪类并判空。
radio 按钮必须用 name 属性分组才能互斥
没加 name 或 name 值不一致，就根本不是“单选”，而是多个独立的 checkbox。浏览器只认 name 相同的一组 <input type="radio"> 为一个逻辑选项组，选中其中一个会自动取消同组其他项。
实操建议：
- 所有同组 radio 的
name值必须完全相同（大小写敏感），比如都用name="gender" - 每个 radio 的
value要不同，提交时后端靠这个值区分选中项，比如value="male"和value="female" - 不要依赖
id或class实现单选逻辑——它们不影响互斥行为
用 label 包裹或 for 关联提升点击体验
原生 radio 点击热区极小，直接点中圆圈很难。不加 <label></label> 就等于把交互门槛提高了三倍。
两种写法都有效，推荐显式 for 关联（更易维护）：
<input type="radio" name="plan" value="basic" id="plan-basic"><label for="plan-basic">基础版</label>
常见错误：
-
for值和对应input的id不匹配（拼写、空格、大小写） - 用了
label但没写for，又没把input套在label里，结果点击文字无效 - 多个 radio 共用同一个
id—— HTML 不合法，JS 获取元素也会出错
JavaScript 读取当前选中值要检查 checked 状态
不能直接取第一个 document.querySelector('input[name="theme"]')，它只是返回 DOM 节点，未必是选中的那个。
正确做法是筛选出已勾选的节点：
const selected = document.querySelector('input[name="theme"]:checked');
const value = selected ? selected.value : null;
注意点：
- 如果用户还没选任何一项，
document.querySelector(...:checked)返回null，必须判空 - 用
querySelectorAll('input[name="x"]').forEach()遍历再判断checked也行，但没必要——:checked伪类已经帮你过滤了 - 别用
getElementById，因为 radio 是按name分组的，没有唯一 ID 可靠标识“当前选中项”
表单重置时 radio 会回到初始 checked 状态
<input type="radio" checked> 只在页面首次加载或 <form></form> 调用 reset() 时生效。之后 JS 修改 checked 属性不会影响重置行为。
关键细节：
- 只有**一个** radio 带
checked属性（HTML 属性，不是 JS 的.checked = true）才会成为重置目标 - 如果一组里多个 radio 都写了
checked，浏览器只认第一个 - 用 JS 设置
el.checked = true不会改变重置基准；想改默认值，得手动删/加 HTML 的checked属性，或调用form.reset()后再 JS 设置
实际开发中，最常被忽略的是 name 一致性与 label 关联——这两处一错，用户甚至意识不到自己“本该只能选一个”。
