检查是否从具有相同 class javascript 的输入中选择了至少一个单选按钮

Question

我正在尝试使用 javascript/html 进行小测验 web 应用程序。 页面上的各个问题由具有相同“测验”class 的 div 标签分隔。 页面上有两个按钮，一个上一个按钮和一个下一个按钮。 根据用户点击的内容，页面将通过隐藏/显示 div 在页面上显示下一个测验。 我想要做的是向应用程序添加输入验证。 在用户移动到下一个问题之前，我想这样做，以便必须选择一个单选按钮，否则显示一个警告框。 属于同一问题的单选按钮都具有相同的 class（即问题 1 的单选按钮都具有相同的 class quiz1）。 当前应用程序能够检查已选择的输入（通过使用 if element.checked）。 按照这个逻辑，我尝试使用 if(.element,checked) 创建警报。 但是警报框卡在一个循环中，因此，到目前为止，我能够提出的唯一其他解决方案是检查是否已选择同一 class 中的至少一个单选按钮。 我不确定如何实现。

 let savedAns = []; const nextBtn = document.getElementById('next'); const prevBtn = document.getElementById('prev'); const quizes = document.querySelectorAll('.quiz'); const form = document.querySelector('form'); const inputEl = document.querySelectorAll('input'); const total = quizes.length; //a variable to increment the classes let ind = 0; //get all the input elements for each question, assign a class quizes.forEach(function(element) { ind++; let inputs = element.querySelectorAll('input'); inputs.forEach((input) => { input.classList.add(`quiz${ind}`) }) }) //keep a track of which question is visible let count = 0; //function to hide all the quizes const hide = function() { quizes.forEach((element) => { element.style.display = 'none' }) } //show and hide divs when user presses next nextBtn.addEventListener('click', function() { if (count < total - 1) { inputEl.forEach(function(element) { if (element.checked) { savedAns[count] = element.value; console.log(savedAns) } }) count++; } else { inputEl.forEach(function(element) { if (element.checked) { savedAns[count] = element.value; console.log(savedAns) } }) alert('no more questions left') return } hide(); quizes[count].style.display = 'block' }) prevBtn.addEventListener('click', function() { if (count > 0) { count--; } else { alert('no more previous questions') return } hide(); quizes[count].style.display = 'block' })

 <div class="content"> <form> <div class="quiz"> <p>Question 1</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 2</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 3</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 4</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> </form> <button id="prev">Prev</button> <button id="next">Next</button> </div>

如果有任何其他方法可以解决问题，非常感谢您提供正确方向的提示。 我也在使用纯粹的 javascript 编写此应用程序，所以请不要使用 jquery。 谢谢你。

Answer 1

由于您已经知道当前哪个问题处于活动状态，因此您可以检查是否检查了活动问题下的任何输入。

let selectedAnswer = -1;
  const activeInputs = quizes[count].querySelectorAll('input');
  activeInputs.forEach((input, index) => {
    if(input.checked) selectedAnswer = index;
  });
  if (selectedAnswer === -1) {
    alert('Select answer');
    return;
  }

下面是工作代码片段。

 let savedAns = []; const nextBtn = document.getElementById('next'); const prevBtn = document.getElementById('prev'); const quizes = document.querySelectorAll('.quiz'); const form = document.querySelector('form'); const inputEl = document.querySelectorAll('input'); const total = quizes.length; //a variable to increment the classes let ind = 0; //get all the input elements for each question, assign a class quizes.forEach(function(element) { ind++; let inputs = element.querySelectorAll('input'); inputs.forEach((input) => { input.classList.add(`quiz${ind}`) }) }) //keep a track of which question is visible let count = 0; //function to hide all the quizes const hide = function() { quizes.forEach((element) => { element.style.display = 'none' }) } //show and hide divs when user presses next nextBtn.addEventListener('click', function() { let selectedAnswer = -1; const activeInputs = quizes[count].querySelectorAll('input'); activeInputs.forEach((input, index) => { if(input.checked) selectedAnswer = index; }); if (selectedAnswer === -1) { alert('Select answer'); return; } if (count < total - 1) { inputEl.forEach(function(element) { if (element.checked) { savedAns[count] = element.value; console.log(savedAns) } }) count++; } else { inputEl.forEach(function(element) { if (element.checked) { savedAns[count] = element.value; console.log(savedAns) } }) alert('no more questions left') return } hide(); quizes[count].style.display = 'block' }) prevBtn.addEventListener('click', function() { if (count > 0) { count--; } else { alert('no more previous questions') return } hide(); quizes[count].style.display = 'block' })

 <div class="content"> <form> <div class="quiz"> <p>Question 1</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 2</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 3</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> <div class="quiz" style="display: none;"> <p>Question 4</p> <input type="radio" name="answer" value="1"> <input type="radio" name="answer" value="2"> <input type="radio" name="answer" value="3"> </div> </form> <button id="prev">Prev</button> <button id="next">Next</button> </div>