应遍历所有已选单选框并按name去重:const form = document.getelementbyid("myform"); const selectedradios = {}; form.queryselectorall('input[type="radio"]:checked').foreach(radio => { selectedradios[radio.name] = radio.value; });

要查询表单中所有被选中的单选框(radio),关键在于:单选框是按 name 分组的,每组最多只有一个被选中,所以不能用“所有被选中的 radio”这种字面理解去遍历——实际是“获取每组中被选中的那个”。
通过表单元素 + name 属性精确获取
最可靠的方式是先获取表单,再按 name 分组逐一检查:
- 用
form.querySelectorAll('input[type="radio"]')获取全部 radio 元素 - 用
Set提取所有唯一的name值 - 对每个
name,用form.querySelector('input[type="radio"][name="xxx"]:checked')找到该组中被选中的那个(若存在)
一行代码获取所有已选 radio 的值(常用场景)
如果只需收集所有被选中 radio 的 value,可这样写:
"myForm")
Array.from( new Set( document.getElementById("myForm") .querySelectorAll('input[type="radio"]') .map(el => el.name) )).map(name => { const checked = document.querySelector(`input[type="radio"][name="${name}"]:checked`); return checked ? checked.value : null;).filter(v => v !== null);
更简洁实用的写法(推荐)
直接遍历所有 radio,但只保留每个 name 下第一个(也是唯一)被选中的:
const form = document.getElementById("myForm");const selectedRadios = {};form.querySelectorAll('input[type="radio"]:checked').forEach(radio => { selectedRadios[radio.name] = radio.value;
<br><code>// selectedRadios 是一个对象,形如 { gender: "male", level: "advanced" }</code>
注意点
-
不要用
:checked直接查全部 radio 再去重:虽然多个同名 radio 中只会有一个:checked,但不同 name 组之间互不影响,所以querySelectorAll('input[type="radio"]:checked')返回的就是所有“当前被选中的 radio 元素”,无需额外去重 - 如果某组 radio 完全没选中,对应 name 就不会出现在结果里
- 确保表单已加载完成再执行查询(比如放在
DOMContentLoaded事件中)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











