Question

我正在创建一个简单的调查表，用户将回答所有问题并获得基于分配给响应的点值计算得出的答案。然后，一个JavaScript函数计算并在屏幕上显示结果。

计算和响应工作正常，但是如果所有问题都没有得到回答（现在只是不运行该功能），我希望该表格发出警报。我将所有问题都设置为“ required”属性，但是目前没有任何东西表明所需的问题尚未得到回答。它只是不运行该功能。

现在，我有一个小验证功能，当用户单击“提交”时，该功能应运行，如果一切都已检查，它将调用主函数来计算结果：

function validateForm() {
    var radios = document.getElementsByTagName('input[type="radio"]');

    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          GetRadio();
      }
        else{
            alert("You must answer all of the questions.");
        }
    }
}

function GetRadio() {

var QS1 = document.querySelector('input[name = "radio1"]:checked').value,
    QS2 = document.querySelector('input[name = "radio2"]:checked').value,
    QS3 = document.querySelector('input[name = "radio3"]:checked').value,
    QS4 = document.querySelector('input[name = "radio4"]:checked').value,
    QS5 = document.querySelector('input[name = "radio5"]:checked').value;

selfPoints = Number(QS1) + Number(QS2) + Number(QS3) + Number(QS4) + Number(QS5);...

我的期望是，在继续运行该函数的其余部分以计算结果之前，它应该先运行验证，如果有任何空白，请在“警告”框中放上。相反，它什么也不运行。并非所有问题都得到了回答，因此无法计算，但也没有发出警报。

更新

确定，更新后的代码不起作用，但是在我的原始代码中使用querySelectorAll的第一个建议开始起作用。（我第二次必须做一些不同的事情，但是我不知道要做什么），所以这就是我现在得到的：

function validateForm() {
    var radios = document.querySelectorAll('input[type="radio"]');

    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          GetRadio();
      }
        else{
            alert("You must answer all of the questions.");
            break;
        }
    }
}

此方法有效，它将发出警报，并且将关闭该警报，但是现在，即使所有问题都得到了回答，它也会引发警报，然后当我将其关闭时，它将计算出我的结果。为什么不运行GetRadio（）函数来计算选中所有框的时间呢？

更新2

好的，代码如下：

  function validateForm() {
    var radios = [document.getElementsByName("radio1"),
                 document.getElementsByName("radio2"),
                 document.getElementsByName("radio3"),
                 document.getElementsByName("radio4"),
                 document.getElementsByName("radio5"),
                 document.getElementsByName("radio1-2"),
                 document.getElementsByName("radio2-2"),
                 document.getElementsByName("radio3-2"),
                 document.getElementsByName("radio4-2"),
                 document.getElementsByName("radio5-2"),
                 document.getElementsByName("radio1-3"),
                 document.getElementsByName("radio2-3"),
                 document.getElementsByName("radio3-3"),
                 document.getElementsByName("radio4-3"),
                 document.getElementsByName("radio5-3"),
                 document.getElementsByName("radio1-4"),
                 document.getElementsByName("radio2-4"),
                 document.getElementsByName("radio3-4"),
                 document.getElementsByName("radio4-4"),
                 document.getElementsByName("radio5-4"),
                 document.getElementsByName("radio1-5"),
                 document.getElementsByName("radio2-5"),
                 document.getElementsByName("radio3-5"),
                 document.getElementsByName("radio4-5"),
                 document.getElementsByName("radio5-5"),];

    for (var i = 0, len = radios.length; i < len; i++) {
        if (!radios[i].checked) {
            alert("You must answer all of the questions.");
            return;
        }
    }
    GetRadio();
}

它拉出组，但是看起来它仍然想要在运行计算之前选择所有单选按钮。即使每个无线电组都有答案，我也会收到警报。说只需要检查每组中的一个收音机的正确方法是什么？

Answer 1

更改

document.getElementsByTagName('input[type="radio"]')

到

document.querySelectorAll('input[type="radio"]')

还尝试如下更改验证功能

function validateForm() {
  var radios = document.querySelectorAll('input[type="radio"]')
  if (!radios.filter(radio => !radio.checked).length) {
    GetRadio();
  } else {
    alert("You must answer all of the questions.");
  }
})

Answer 2

我看到您的代码（和更新的代码）有两个问题。

其他人似乎错过的第一个问题是，一旦发现任何问题选择了任何值，更新的代码就会继续-它不会检查所有单个问题的答案是否都符合预期< / strong>。

第二个问题是，只要未选中任何无线电，就会立即停止当前代码（因此是第一个元素），而不会检查是否从同一问题中选择了另一个答案。
>
解决方案是将问题中的答案归为一组，并一次检查一个问题。如下所示构造HTML，将广播分组：

<input type="radio" name="Question1" value="a"> A <input type="radio" name="Question1" value="b"> B <input type="radio" name="Question1" value="c"> C <input type="radio" name="Question2" value="a"> A <input type="radio" name="Question2" value="b"> B <input type="radio" name="Question2" value="c"> C

然后验证每个问题，如下所示：

if (!document.querySelector('input[name="Question1"]:checked').value) { //If nothing is checked, it will get undefined return false; }

因此，完整循环如下：

//This part is the answer to your question for (var i=1; i <= questions.length;i++) { if (!document.querySelector('input[name="Question"' + i + ']:checked').value) { //If nothing is checked, it will get undefined and false will be returned return false; } }

作为奖励，您可以通过以下方式检查结果：

function checkAnswer(questionNumber, correctAnswer) { let checkedItem = document.querySelector('input[name="Question"' + questionNumber + ']:checked'); if (checkedItem.value === correctAnswer) { return true; } return false; //OR // return checkedItem.value === correctAnswer }

Answer 3

如果我正确理解，您的代码应如下所示：如果检查有误，请发出警报，退出甚至不计算如果全部选中，则计算

function validateQuestion(container) {
    var radios = container.querySelectorAll('input[type="radio"]');
    for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
        return true;
      }
    }
    return false;
}

function validateForm() {
  var questions = document. querySelectorAll('.question');
  var isValid = true;
  for (var i = 0, len = questions.length; i < len; i++) {
    isValid = isValid && validateQuestion(questions[i]);
    if (!isValid) {
      alert("You must answer all of the questions.");
      return;
    }
  }
  GetRadio();
}

您质疑html应该看起来像这样

<div class="question q-1">
  Question 1:
  <input type="radio" value="1-a">A
  <input type="radio" value="1-b">B
  <input type="radio" value="1-c">C
</div>
<div class="question q-2">
  Question 2:
  <input type="radio" value="2-a">A
  <input type="radio" value="2-b">B
  <input type="radio" value="2-c">C
</div>

嵌套在另一个函数中的验证函数未运行

3 个答案: