如何检测同一name属性的radio单选框组是否有任意项被选中

你的原有代码存在两个问题：

• 只通过document.querySelector获取第一个name为maca的单选框，无法检测后续单选框的选中状态
• getAttribute("checked")获取的是元素初始化时的静态HTML属性，不会跟随用户交互实时更新，应该使用DOM元素自带的checked布尔属性判断

正确实现方式 #

直接使用:checked伪类选择器匹配已选中的同name单选框，判断匹配结果是否存在即可：

// 检测name为maca的单选组是否有选中项
const isRadioChecked = document.querySelector("input[name='maca']:checked") !== null;

if (isRadioChecked) {
  // 存在选中项的处理逻辑
} else {
  // 无选中项的处理逻辑
}

你使用的单选框HTML结构参考：

<input type="radio" name="maca" id="maca1">
<input type="radio" name="maca" id="maca2">

补充说明 #

如果需要通用封装任意name单选组的检测逻辑，可以写成函数：

function checkRadioGroupChecked(name) {
  return document.querySelector(`input[name="${name}"]:checked`) !== null;
}

// 调用示例
console.log(checkRadioGroupChecked('maca')); // 选中返回true，未选中返回false

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