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

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

让savedAns=[]；
const nextBtn=document.getElementById（'next'）；
const prevBtn=document.getElementById（'prev'）；
const quizes=document.querySelectorAll（'.quick'）；
const form=document.querySelector（'form'）；
const inputEl=document.querySelectorAll（'input'）；
const total=quizes.length；
//增加类的变量
设ind=0；
//获取每个问题的所有输入元素，分配一个类
quizes.forEach（函数（元素）{
ind++；
让inputs=element.querySelectorAll（'input'）；
输入。forEach（（输入）=>{
input.classList.add（`quick${ind}`）
})
})
//跟踪哪个问题是可见的
让计数=0；
//函数来隐藏所有的谜题
常量hide=函数（）{
quizes.forEach（（元素）=>{
element.style.display='none'
})
}
//当用户按下下一步时显示和隐藏div
nextBtn.addEventListener（'click'，function（）{
如果（计数<总数-1）{
inputEl.forEach（函数（元素）{
如果（元素已选中）{
savedAns[count]=element.value；
console.log（savedAns）
}
})
计数++；
}否则{
inputEl.forEach（函数（元素）{
如果（元素已选中）{
savedAns[count]=element.value；
console.log（savedAns）
}
})
警报（'不再有问题了'）
返回
}
隐藏（）；
quizes[count].style.display='block'
})
prevBtn.addEventListener（'click'，函数（）{
如果（计数>0）{
计数--；
}否则{
警报（'不再有以前的问题'）
返回
}
隐藏（）；
quizes[count].style.display='block'
})

问题1

问题2

问题3

问题4

上
下一个

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

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;
  }

下面是工作代码片段

让savedAns=[]；
const nextBtn=document.getElementById（'next'）；
const prevBtn=document.getElementById（'prev'）；
const quizes=document.querySelectorAll（'.quick'）；
const form=document.querySelector（'form'）；
const inputEl=document.querySelectorAll（'input'）；
const total=quizes.length；
//增加类的变量
设ind=0；
//获取每个问题的所有输入元素，分配一个类
quizes.forEach（函数（元素）{
ind++；
让inputs=element.querySelectorAll（'input'）；
输入。forEach（（输入）=>{
input.classList.add（`quick${ind}`）
})
})
//跟踪哪个问题是可见的
让计数=0；
//函数来隐藏所有的谜题
常量hide=函数（）{
quizes.forEach（（元素）=>{
element.style.display='none'
})
}
//当用户按下下一步时显示和隐藏div
nextBtn.addEventListener（'click'，function（）{
让selectedAnswer=-1；
const activeInputs=quizes[count]。querySelectorAll（'input'）；
activeInputs.forEach（（输入，索引）=>{
如果（input.checked）选择了拒绝=索引；
});
如果（选择回答==-1）{
警报（“选择应答”）；
返回；
}
如果（计数<总数-1）{
inputEl.forEach（函数（元素）{
如果（元素已选中）{
savedAns[count]=element.value；
console.log（savedAns）
}
})
计数++；
}否则{
inputEl.forEach（函数（元素）{
如果（元素已选中）{
savedAns[count]=element.value；
console.log（savedAns）
}
})
警报（'不再有问题了'）
返回
}
隐藏（）；
quizes[count].style.display='block'
})
prevBtn.addEventListener（'click'，函数（）{
如果（计数>0）{
计数--；
}否则{
警报（'不再有以前的问题'）
返回
}
隐藏（）；
quizes[count].style.display='block'
})

问题1

问题2

问题3

问题4

上
下一个

更改问题2、3、4的名称。例如，问题2感谢您的评论。我想知道你是否可以解释一下改变名字而不是班级的原因？谢谢。在您的示例中，每个答案中有3个选项，因此您可以设置每个问题的名称。因此，您必须检查每个问题的答案。只有与特定问题相关的三个单选按钮应具有相同的名称。只能有一个具有相同名称的活动选项。因此，当您选择（即）第二个问题的选项2时，您失去了问题1上的所选选项。这就是代码中的问题