如何获取单选按钮组的取值数组（含空值）？jQuery实现示例

刚好之前帮人解决过类似需求，用jQuery可以轻松实现你要的效果——遍历所有单选按钮组，选中的返回对应值，未选中的组填充null，最终得到规范的结果数组。

实现思路 #

1. 先收集页面上所有单选按钮的唯一name属性值，以此确定有多少个独立的按钮组；
2. 逐个遍历这些组名，检查对应组里有没有选中的单选按钮；
3. 有选中项就取它的value，没有选中项就用null填充；
4. 把所有结果整理成数组即可。

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 示例单选按钮结构 -->
<p>
  true <input type="radio" name="one" value="Yes" checked>
  false <input type="radio" name="one" value="No">
</p>
<p>
  true <input type="radio" name="two" value="Yes">
  false <input type="radio" name="two" value="No">
</p>
<p>
  true <input type="radio" name="three" value="Yes">
  false <input type="radio" name="three" value="No">
</p>
<p>
  true <input type="radio" name="four" value="Yes">
  false <input type="radio" name="four" value="No" checked>
</p>

<script>
// 第一步：提取所有唯一的单选按钮组名称
const groupNames = $('input[type="radio"]')
  .map(function() { return this.name; })
  .get()
  .filter((name, index, self) => self.indexOf(name) === index); // 去重处理

// 第二步：遍历每个组，收集选中值/空值
const result = groupNames.map(name => {
  const checkedValue = $(`input[name="${name}"]:checked`).val();
  return checkedValue !== undefined ? checkedValue : null;
});

console.log(result); // 控制台输出：["Yes", null, null, "No"]
</script>

代码细节说明 #

• $('input[type="radio"]').map(...)：先提取所有单选按钮的name，再通过filter去重，确保每个组只处理一次；
• $(input[name="${name}"]:checked).val()：用:checked选择器精准定位当前组的选中按钮，获取其值；如果没有选中项，val()会返回undefined，这时候我们就用null替代；
• 最终的result数组完全符合你要的格式，包含了所有组的结果，未选中的组也不会遗漏。

内容的提问来源于stack exchange，提问作者Bryan Dellinger