最直接的方式是用 document.queryselector('input[name="xxx"]:checked') 获取选中 radio 的值，它只匹配被选中的元素，未选中时返回 null，无需遍历或手动判断；注意 name 属性需一致、dom 已就绪、必须加 :checked 伪类。
用 document.querySelector 获取选中的 radio 值最直接
radio 是一组同名 input[type="radio"]，只有被选中的那个才有值，所以不能靠单个元素取，得从组里找。用 document.querySelector('input[name="xxx"]:checked') 是最稳妥的方式——它天然只匹配当前被选中的那个，没选中就返回 null，不会报错。
常见错误是写成 document.getElementById 或遍历所有 radio 手动判断 checked，既啰嗦又容易漏掉未选中的边界情况。
- 确保所有 radio 的
name属性完全一致（包括大小写和空格） - 如果页面加载时还没渲染完 radio（比如异步插入），要等 DOM 就绪后再执行查询
- 别忘了加
:checked伪类，否则会取到第一个（不管是否选中）
用 FormData 批量获取更适用于表单提交场景
如果你的 radio 在一个 <form></form> 里，且后续要连带其他字段一起提交，直接用 new FormData(formElement) 拿值更干净。它自动忽略未选中的 radio，只保留 name-value 对。
相比手动查 :checked，FormData 不依赖 DOM 查询时机，也不怕 name 写错（因为是按实际表单结构读的），但前提是必须在 <form></form> 内，且 radio 有 name。
-
FormData.get('radioName')返回字符串值，没选中时返回null -
FormData.getAll('radioName')总是返回数组，但 radio 组只会有一个值，所以长度最多为 1 - 注意：如果 radio 没设
value属性，默认值是"on"，不是空字符串
监听 change 事件时别用 click
给 radio 绑 change 事件比 click 更可靠。click 在某些情况下（比如空格键触发、屏幕阅读器操作）可能不触发，而 change 只在真实选中状态变化时触发，语义准确。
典型错误是给每个 radio 单独绑 click，然后在回调里再查哪个被点了——这既冗余又容易因事件冒泡或重复绑定出问题。
- 应该委托到父容器，监听
change事件，再用event.target拿当前选中的元素 - 或者直接监听整个 radio 组的共同
name，用event.target.name === 'xxx'过滤 - 别在 change 回调里用
querySelector重新查——event.target就是刚选中的那个input元素
兼容性与值处理：IE 中 :checked 需要小心
IE8 及以下不支持 :checked 伪类，如果还要兼容，得退回到遍历 + checked 判断。不过现在绝大多数项目已无需考虑 IE8，重点反而是值的类型处理。
radio 的 value 始终是字符串，即使你写了 value="1"，拿到的也是 "1"，不是数字。如果后续要参与计算或比较，记得显式转换。
- 用
Number(input.value)或一元加号+input.value转数字 - 用
input.value === "true"比== true更安全 - 服务端接收时也要注意：前端传的是字符串，后端别默认当布尔或整型解析
null、undefined 或空字符串，取决于你用哪种方式取——关键不是记住每种返回什么，而是每次使用前做一次存在性判断，比如 if (el && el.value) 或 formData.has('name')。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
