使用原生JS（Vanilla JS）验证多组单选按钮的问题求助

嘿，我完全懂你现在的困扰——50组单选按钮的验证确实容易在遍历逻辑上踩坑，尤其是不用jQuery的原生JS场景。先别着急，咱们一步步把这个问题捋顺。

首先，大概率你之前的代码是把所有单选按钮混在一起检查，只要有一个被选中就误以为所有问题都回答了，这肯定不对。正确的思路应该是按每个问题组单独验证，确保每一组（也就是每个问题对应的4个单选按钮）里至少有一个被选中。

解决方案一：基于单选按钮的name属性分组验证 #

这是最标准的做法，因为单选按钮本来就是靠相同的name属性来分组的。直接上代码：

document.getElementById("submit_btn").addEventListener("click", function(event){
  // 先阻止表单默认提交，避免验证前就跳转
  event.preventDefault();
  let allAnswered = true;

  // 第一步：获取所有单选按钮的name属性，去重得到所有问题组的唯一标识
  const allRadios = document.querySelectorAll('input[type="radio"]');
  const questionGroups = new Set();
  allRadios.forEach(radio => questionGroups.add(radio.name));

  // 第二步：逐个检查每个问题组是否有选中项
  questionGroups.forEach(groupName => {
    const hasSelected = document.querySelector(`input[name="${groupName}"]:checked`);
    if (!hasSelected) {
      allAnswered = false;
      // 给未回答的问题加视觉提示（比如高亮问题容器）
      const questionContainer = document.querySelector(`input[name="${groupName}"]`).closest('.question');
      if (questionContainer) {
        questionContainer.style.border = '2px solid #ff4444';
        questionContainer.style.padding = '8px';
      }
    }
  });

  // 第三步：根据验证结果处理
  if (allAnswered) {
    alert('所有问题都已回答，提交成功！');
    // 如果是表单，执行提交：this.form.submit();
  } else {
    alert('请完成所有问题的回答哦！');
  }
});

关键逻辑解释 #

• 用Set自动去重，确保每个问题组只检查一次，避免重复操作
• 用:checked伪类选择器直接判断当前组是否有选中的单选按钮，简洁高效
• 额外加了视觉提示，用户能快速定位到未回答的问题，体验更好

备选方案：基于问题容器分组验证 #

如果你的页面结构是每个问题都包裹在一个独立的容器里（比如class为question的div），可以直接遍历这些容器，不用依赖name属性，灵活性更高：

document.getElementById("submit_btn").addEventListener("click", function(event){
  event.preventDefault();
  let allAnswered = true;

  const questionContainers = document.querySelectorAll('.question');
  questionContainers.forEach(container => {
    const selectedRadio = container.querySelector('input[type="radio"]:checked');
    if (!selectedRadio) {
      allAnswered = false;
      container.style.border = '2px solid #ff4444';
    } else {
      // 移除之前的提示样式（如果有的话）
      container.style.border = '';
    }
  });

  if (allAnswered) {
    alert('提交成功！');
    // this.form.submit();
  } else {
    alert('还有未回答的问题，请检查！');
  }
});

注意事项 #

• 确保每个问题的单选按钮组name属性唯一（同一组相同，不同组不同），这是单选按钮分组的核心前提
• 验证前一定要阻止表单的默认提交行为（event.preventDefault()），不然验证逻辑还没执行完页面就跳转了
• 可以根据需求调整视觉提示的样式，比如添加提示文字、改变背景色等

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