如何使用原生JavaScript获取单选按钮组的所有值？

要获取同组内所有单选按钮的值列表，你可以通过原生JavaScript按以下方式实现：

核心逻辑 #

通过单选按钮的name属性定位整个按钮组，提取每个按钮的value属性，按需排序后得到目标列表。

方法一：使用querySelectorAll #

// 替换为你的单选按钮组name值
const targetRadioName = 'name';
// 选中所有同组单选按钮
const radioGroup = document.querySelectorAll(`input[type="radio"][name="${targetRadioName}"]`);
// 提取value并转为数组
const valueList = Array.from(radioGroup).map(item => item.value);
// 按数字排序（可选，根据需求调整）
valueList.sort((a, b) => Number(a) - Number(b));
console.log(valueList); // 输出 ["1","2","3","4","5","6","7","8","9"]

方法二：使用getElementsByName #

const targetRadioName = 'name';
// 获取同组单选按钮集合
const radioGroup = document.getElementsByName(targetRadioName);
// 转数组并提取value
const valueList = [...radioGroup].map(item => item.value);
// 按需排序
valueList.sort((a, b) => Number(a) - Number(b));
console.log(valueList);

补充说明 #

• 两种方法都能定位到同name的单选按钮组，区别在于返回的集合类型不同，但都可以通过Array.from()或扩展运算符[...]转为数组处理。
• 排序步骤为可选操作：如果只需要保持DOM中的原始顺序，直接去掉sort代码即可；如果需要按数字大小排序，保留排序逻辑。

内容的提问来源于stack exchange，提问作者Jeffrey wang