动态Radio Button取值异常求助：如何获取选中单选按钮的值

嘿，我来帮你解决动态生成单选按钮的取值问题！你遇到的核心问题是单选按钮的name是动态生成的（比如abc_181508、abc_181509这种带后缀的格式），没法直接写固定的name来获取值，这里给你几个实用的解决方案：

方法1：通过name前缀匹配所有选中项 #

既然所有动态生成的单选按钮name都以abc_开头，我们可以用属性前缀选择器来筛选所有被选中的单选按钮：

// 匹配所有name以abc_开头且被选中的单选按钮
const checkedRadios = document.querySelectorAll('input[type="radio"][name^="abc_"]:checked');

// 遍历每个选中项，拿到对应的组名和值
checkedRadios.forEach(radio => {
  console.log(`组名：${radio.name}，选中值：${radio.value}`);
});

方法2：精准获取某一组的选中值 #

如果你需要单独获取某一组的选中值（比如你知道目标组的ID是181509），可以通过动态拼接name来定位：

// 这里的groupId可以是你动态获取到的变量
const groupId = '181509';
const selectedRadio = document.querySelector(`input[name="abc_${groupId}"]:checked`);

if (selectedRadio) {
  console.log(`组abc_${groupId}的选中值：${selectedRadio.value}`);
} else {
  console.log(`组abc_${groupId}还没有选中任何选项哦`);
}

方法3：给单选按钮加统一类名（推荐） #

如果能修改生成单选按钮的代码，建议给所有动态生成的单选按钮加上一个统一的类名，比如dynamic-radio，这样后续取值会更清晰：

<!-- 修改后的生成代码示例 -->
<input type="radio" class="dynamic-radio" name="abc_181508" value="3" /> Reset
<input type="radio" class="dynamic-radio" name="abc_181509" value="1" /> Approve
<input type="radio" class="dynamic-radio" name="abc_181509" value="0" /> Reject

然后用类名来获取选中项：

const checkedRadios = document.querySelectorAll('.dynamic-radio:checked');
checkedRadios.forEach(radio => {
  console.log(`组名：${radio.name}，选中值：${radio.value}`);
});

小提醒 #

• 一定要结合:checked伪类，才能精准定位到被选中的单选按钮，否则会拿到同一组的所有选项
• 如果项目里用了jQuery，写法会更简洁：$('input[name^="abc_"]:checked').val()，不过原生JS的方法已经足够应对大部分场景啦

内容的提问来源于stack exchange，提问作者Nagarjuna Hebbar