如何用通用选择器与.each()函数验证所有单选按钮组均有选中值

核心思路是先提取页面中所有唯一的单选按钮组name值（同一组单选按钮共享同一个name），再遍历每个name对应的组，检查是否有选项被选中。具体实现如下：

// 提取所有单选按钮的唯一name属性值
const radioGroupNames = $('input[type="radio"]')
  .map(function() {
    return this.name;
  })
  .get()
  .filter(function(value, index, self) {
    return self.indexOf(value) === index; // 去重，保留唯一的组名
  });

// 遍历每个单选按钮组进行验证
let isValid = true;
const unselectedGroups = [];

$(radioGroupNames).each(function(index, groupName) {
  // 检查当前组是否有选中项
  const hasChecked = $('input[name="' + groupName + '"]:checked').length > 0;
  
  if (!hasChecked) {
    isValid = false;
    unselectedGroups.push(groupName);
  }
});

// 输出验证结果
if (!isValid) {
  console.log('以下单选按钮组未选择任何选项：' + unselectedGroups.join(', '));
  // 这里可以添加自定义提示逻辑，比如弹窗提示用户
} else {
  console.log('所有单选按钮组均已选择');
}

关键步骤说明 #

• 通用选择器：input[type="radio"] 匹配页面上所有单选按钮，无需指定具体id或name，实现通用匹配。
• 去重处理：通过map()提取所有name后，用filter()去重，确保每个单选组只被检查一次。
• .each()遍历：对每个唯一的组名，检查对应组内是否有选中项，完成全组验证。

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