[英]check if at least one radio button is selected from inputs with the same class javascript
我正在尝试使用 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。 谢谢你。
由于您已经知道当前哪个问题处于活动状态,因此您可以检查是否检查了活动问题下的任何输入。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.