最直接可靠的方式是用 document.querySelectorAll('inputtype="radio"') 获取同 name 的所有 radio 元素，再通过 checked 属性判断选中状态，或用 FormData.get('name') 直接获取选中值。
用 document.querySelectorAll 选中同 name 的所有 radio 元素
HTML 中 必须靠 name 属性成组，所以遍历的前提是知道这组的 name 值。最直接可靠的方式是用 document.querySelectorAll('input[name="xxx"]')，它返回的是 NodeList，可直接用 forEach 遍历。
注意别用 getElementsByTagName 或 getElementsByName：前者会拉回所有 input（包括 text、checkbox），后者返回的是 HTMLCollection 且在某些浏览器中对动态插入的 radio 支持不稳定。
-
name值必须完全匹配，区分大小写 - 如果
name含特殊字符（如[]、.），需用转义或属性选择器语法，例如input[name="user[gender]"] - 推荐加
type="radio"二次过滤，更安全：input[type="radio"][name="gender"]
检查是否被选中用 checked 属性，不是 value
遍历时常误以为「拿到 value 就等于拿到选中项」，但其实每个 input 元素都有 value，而是否生效只看 checked 属性的布尔值。没选中的 radio 的 checked 是 false，不会因为 value 相同就混淆。
常见错误是循环里只读 el.value，结果拿到全部选项的 value，却不知道哪个真被选中。
- 判断逻辑必须是
if (el.checked) { ... } - 获取当前选中项的 value：先找到
checked === true的那个元素，再取它的value - 若想一次性拿到所有选项的 value + 状态，可用
Array.from(nodes).map(el => ({ value: el.value, checked: el.checked }))
用 FormData 更简单地提取选中值（现代浏览器）
如果目标只是获取用户最终选中的值（而不是遍历所有选项做 UI 反馈），FormData 是更轻量、语义更清晰的方式——它天然只收集「已选中」的表单控件值，radio 自动按 name 归并，一个 name 只返回一个 value。
不需要手动遍历、判断 checked，也不用担心 DOM 是否加载完成（只要 form 存在即可）。
- 前提是 radio 在
内，或手动构造new FormData(formElement) -
formData.get('gender')直接返回选中的 value 字符串；未选中则返回null - 不支持 IE，但 Chrome/Firefox/Safari/Edge 均无问题
监听变化时别只绑在单个 radio 上
给每个 radio 单独加 change 事件监听器容易重复、难维护。正确做法是委托到父容器或 form 元素上，用事件冒泡 + event.target 判断来源。
否则会出现：新增 radio 后忘记绑定、多个监听器互相干扰、或者某个 radio 的 change 没触发（比如用户用键盘空格切换但没触发 click）。
- 推荐监听
form的change事件，然后检查event.target.type === 'radio'和name - 避免用
click替代change：click 在未选中状态下点已选项也会触发，但不会改变状态 - 如果必须监听单个元素，请确保每次只绑一次，避免重复
addEventListener
实际写的时候最容易漏掉的是：没确认 name 是否一致、把 value 当成选中标识、以及监听了 click 而不是 change。这几个点卡住的话，看起来像“遍历没效果”，其实是逻辑断在了前面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
