Javascript 使用多个单选按钮验证多个选项卡

我有一个表单，它有多个选项卡，每个选项卡上显示10个问题，并包含（真/假）单选组（由php代码生成，因此我不知道它们的名称或将显示多少），我需要在单击下一个按钮时检查它们是否被选中。如果没有，我想向用户显示未回答的问题（没有警告消息，但可以在带有绿色或红色复选图标的标签中）

我试过用谷歌搜索这个问题，但之前的答案都不适合我的情况

编辑： 这是我代码的一部分：

<form  id="questionForm" action="" method="post" role="form">
  <input type="hidden" name="login" value="<?php echo $_SESSION['login-user']?>"/>
  <input type="hidden" name="pass_user" value="<?php echo $_SESSION['pass_user']; ?>"/>
  <?php
  $blocks_questions = array_chunk($questions, 10);
  foreach($blocks_questions as $cle=>$question_block) {?>
    <div class='tab'>
      <?php
      foreach ($question_block as $key => $question) {
        $id_quiz_qst=$question['id_quiz'].",".$question['id_qst'];?>
        <div class="form-group qst-row">
          <div class="row">
            <div class="col-sm-10"><p><?php echo $question['question'] ?></p>
            </div>
            <div class="col-sm-2">
              <span class="question-rbtn" >
                <span class="switch radio-switch fixed-width-lg">
                  <input name="<?php echo $id_quiz_qst?>" id="<?php echo $id_quiz_qst."_on";?>" value="Vrai" <?php if (isset($_POST[$id_quiz_qst]) && $_POST[$id_quiz_qst]=="Vrai") echo "checked";?> type="radio">
                  <label for="<?php echo $id_quiz_qst."_on";?>" class="radioCheck">Vrai</label>

                  <input name="<?php echo $id_quiz_qst?>" id="<?php echo $id_quiz_qst."_off";?>" value="Faux" type="radio" <?php if (isset($_POST[$id_quiz_qst]) && $_POST[$id_quiz_qst]=="Faux") echo "checked";?>>
                  <label for="<?php echo $id_quiz_qst."_off";?>" class="radioCheck">Faux</label>
                  <a class="slide-button btn"></a>
                  <label style="display:inline; float:right; position:absolute; font-size:18px;">
                    <i class="good icon_check_alt2" style="color:#17944d ;"></i>
                    <i class="not-good icon_close_alt2" style="color:#ff5032 ;"></i>
                  </label>
                </span>
              </span>
            </div>
          </div>
        </div>
      <?php } ?>
    </div>
    <?php
  } ?>
  <div style="overflow:auto;">
    <div class="text-center">
      <a class="next-prev" id="prevBtn" onclick="nextPrev(-1)"><i class="fa arrow_carrot-2left_alt "></i></a>
      <a class="next-prev" id="nextBtn" onclick="nextPrev(1)"><i class="fa arrow_carrot-2right_alt"></i></a>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:10px;">
    <span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span><span class="step"></span>
  </div>
  <div id="submit-area" class="text-center">
    <button id="submit_answers" name="submit_answers" type="submit" onclick="myfunc();" class="btn btn-primary btn-lg">Valider</button>
    <button type="reset" class="btn btn-primary btn-lg">Annuler</button>

  </div>
</form>



<script>
  var currentTab = 0; // Current tab is set to be the first tab (0)
  showTab(currentTab); // Display the current tab

  function showTab(n) {
    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
      document.getElementById("prevBtn").style.display = "none";
    } else {
      document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
      document.getElementById("submit-area").style.display="block";
      document.getElementById("nextBtn").style.display = "none";
    } else {
      document.getElementById("nextBtn").style.display = "inline";
    }
    //... and run a function that will display the correct step indicator:
    fixStepIndicator(n)
  }

  function nextPrev(n) {
    // This function will figure out which tab to display
    var x = document.getElementsByClassName("tab");
    // Exit the function if any field in the current tab is invalid:
    if (n == 1 && !validateForm()) return false;
    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form...
    if (currentTab >= x.length) {
      // ... the form gets submitted:
      document.getElementById("questionForm").submit();
      return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
  }
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");

  function changeColor(){
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");

  }
  function validateForm() {
    // This function deals with validation of the form fields
    var x, y, i, good, not_good, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    good = document.getElementsByClassName("good");
    not_good = document.getElementsByClassName("not-good");

    // A loop that checks every input field in the current tab:
    //  alert(y[0].getElementById("btv").name);
    var indexinc =0;
    for (i = 0; i < y.length; i++) {
      // If a field is empty...
      //y[i].parentNode.className =     y[i].parentNode.className.replace("invalid","");
      if (!y[i].checked) {
        indexinc++;
        // add an "invalid" class to the field:
        not_good[i].style.display="block";
        // and set the current valid status to false
        valid = false;
      }
      else{
        good[i].style.display="block";
        valid = true;
      }
    }
    if(indexinc == 10)//Verify that he did answer all 22 questions and check that we have the 22 inputs not 44 inputs (vrai/faux)
    valid = true;
    // If the valid status is true, mark the step as finished and valid:
    if (valid) {
      document.getElementsByClassName("step")[currentTab].className += " finish";
    }
    return valid; // return the valid status
  }
  function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
      x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class on the current step:
    x[n].className += " active";
  }
</script>

您可以使用html结构对此进行评估，使用querySelectorAll并验证是否至少选择了某个节的一个单选按钮，此函数将起作用，但我建议它们将它们放在类或IIFE中，以避免在全局范围中声明它们


函数nextTab（e）{
如果（验证（e））{
console.log（“转到下一个选项卡”）；
} 
}
功能验证（元素）{
让val=true；
让选择=元素。最近的（“截面”）；
select.querySelectorAll（'.radio container'）.forEach（函数（容器）{
let radioChecked=container.querySelectorAll（“输入：选中”）；
container.style.backgroundColor=“白色”；
如果（！radioChecked.length）{
val=val&&false；
container.style.backgroundColor=“红色”；
}
});
返回val；
}

男性
女性
其他
男性
女性
其他
男性
女性
其他
继续
请为生成的元素和您已经尝试过的任何Javascript提供HTML。@daddygames我在问题中添加了我的代码，谢谢您的时间您能加入我吗：非常感谢您是最好的我对代码有问题，它会验证单选按钮是否被选中两次