首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >检查是否至少从具有相同类javascript的输入中选择了一个单选按钮

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

Stack Overflow用户
提问于 2021-02-11 13:46:38
回答 1查看 49关注 0票数 0

我正在尝试使用javascript/html制作一个小测验web应用程序。页面上的单个问题由div标签分隔,并带有相同的"quiz“类。页面上有两个按钮,一个是“上一个”按钮,一个是“下一个”按钮。根据用户点击的内容,页面将通过隐藏/显示div在页面上显示下一个测验。我要做的是向应用程序添加一个输入验证。在用户转到下一个问题之前,我想让它必须选中一个单选按钮,否则会显示一个警告框。属于同一问题的所有单选按钮都具有相同的类(即问题1的所有单选按钮都具有相同的类quiz1)。目前,应用程序能够检查选择了哪个输入(通过使用if element.checked)。按照这个逻辑,我尝试使用if(!element.checked)创建一个警告,但是警告框陷入循环。因此,到目前为止,我唯一能想到的其他解决方案是检查是否在同一个类中至少选择了一个单选按钮,我不确定如何实现这一点。

代码语言:javascript
运行
复制
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'
})
代码语言:javascript
运行
复制
<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。谢谢你。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-11 16:30:30

因为您已经知道当前哪个问题是活动的,所以您可以检查活动问题下的任何输入是否被选中。

代码语言:javascript
运行
复制
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;
  }

下面是工作代码片段。

代码语言:javascript
运行
复制
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'
})
代码语言:javascript
运行
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66149376

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档