如何在HTML表单中弹窗提示未勾选的单选按钮数量？

没问题，我来帮你搞定这个需求！先提个小细节：你代码里的radio按钮id重复了，虽然不影响功能，但HTML规范里id必须唯一，建议改成a-radio-1、a-radio-2这种唯一值哦。

实现思路 #

核心逻辑是先找出所有独立的单选按钮组（每个name属性对应一组，同一组只能选一个选项），然后逐个检查每组是否有被选中的选项，最后统计未勾选的组数量并弹窗提示。

完整代码示例 #

<table>
  <tr>
    <td><strong>a</strong></td>
    <td><input type="radio" id="a-radio-1" name="a"/><label for="a-radio-1">选项1</label></td>
    <td><input type="radio" id="a-radio-2" name="a"/><label for="a-radio-2">选项2</label></td>
  </tr>
  <tr>
    <td><strong>acronym</strong></td>
    <td><input type="radio" id="acronym-radio-1" name="acronym"/><label for="acronym-radio-1">选项A</label></td>
    <td><input type="radio" id="acronym-radio-2" name="acronym"/><label for="acronym-radio-2">选项B</label></td>
  </tr>
  <tr>
    <td><strong>category</strong></td>
    <td><input type="radio" id="category-radio-1" name="category"/><label for="category-radio-1">选项X</label></td>
    <td><input type="radio" id="category-radio-2" name="category"/><label for="category-radio-2">选项Y</label></td>
  </tr>
</table>
<button onclick="checkRadioGroups()">提交</button>

<script>
function checkRadioGroups() {
  // 获取页面所有单选按钮
  const allRadios = document.querySelectorAll('input[type="radio"]');
  // 用Set自动去重，得到所有唯一的单选组名称
  const groupNames = new Set([...allRadios].map(radio => radio.name));
  
  let uncheckedCount = 0;
  
  // 遍历每个组，检查是否有选中的选项
  groupNames.forEach(groupName => {
    const checkedRadio = document.querySelector(`input[name="${groupName}"]:checked`);
    if (!checkedRadio) {
      uncheckedCount++;
    }
  });
  
  // 根据统计结果弹出提示
  if (uncheckedCount > 0) {
    alert(`还有 ${uncheckedCount} 组选项未勾选，请完成选择！`);
  } else {
    alert('所有选项组已完成勾选，提交成功！');
  }
}
</script>

代码细节说明 #

1. 获取唯一组名：利用Set的去重特性，从所有radio的name属性中提取出独立的分组，避免重复检查同一组。
2. 检查组状态：用document.querySelector配合:checked伪类，快速判断该组是否有选中的radio，代码简洁高效。
3. 灵活触发方式：如果需要在表单提交时自动检查，只需把函数绑定到表单的onsubmit事件，并返回false阻止未完成时的提交，示例如下：

<form onsubmit="return checkRadioGroups()">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script>
function checkRadioGroups() {
  // 保留上面的检查逻辑...
  if (uncheckedCount > 0) {
    alert(`还有 ${uncheckedCount} 组选项未勾选，请完成选择！`);
    return false; // 阻止表单提交
  }
  return true; // 允许正常提交
}
</script>

内容的提问来源于stack exchange，提问作者M.A.S