检查选中的单选按钮是否返回true，但应为false

时间：2019-02-06 21:40:14

标签： javascript html

此问题与this不同。这里的问题源于保留了先前值的if条件，而另一个问题是询问如何确定屏幕上显示的输入类型。

<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript">
            function displayquestion(a, ignore){
                var b = a-1;
                var currentInput = '';
                var questions = document.getElementsByClassName("questionholder");
                var showRequired = document.getElementById("requiredMessage");

                function showNext (){
                    showRequired.style.display = "none";        

                    for(var i=0; i < questions.length; i++) {           
                        questions[i].style.display = "none";    
                    }

                    var nextQuestion = document.getElementById("question" + a);

                    if(nextQuestion !== null) {
                        nextQuestion.style.display = "block";
                    }   
                }

                // Check if question should ignore inputs
                if (ignore == 1) { // yes, ignore the inputs so move on to next question
                    console.log("path 1");

                    showNext();

                } else { //no, don't ignore the inputs
                    if (document.querySelector('input.input' + b).type == "radio") { //this is a radio input                
                        if (document.querySelector('input[type=radio]:checked')) { //a radio option is selected
                            console.log("path 2");

                            showNext();

                        } else { // no radio option is selected so show error                   
                            console.log("path 3");

                            showRequired.style.display = "block";
                        }               
                    } else { // not a radio input
                        if (document.querySelector('input.input' + b) !== null) {
                            var currentInput = document.querySelector('input.input' + b).value;
                        }

                        if (currentInput == '') { // the input is blank so show error
                            console.log("path 4");

                            showRequired.style.display = "block";

                        } else { // the input is not blank so move on to next question
                            console.log("path 5");

                            showNext();
                        }
                    }
                }
            }   
        </script>
    </head>
    <body>
        <div id="requiredMessage" style="display:none">
            <p>This field is required.</p>
        </div>
        <form id="TheForm" style="display:block;">
            <div data-toggle="buttons" class="questionholder multiplechoice" id="question13" style="display:block">
                <h5>The world is... </h5>
                <input class="input13" type="radio" id="round" name="isPrevRel" value="round">
                <label for="round">
                    <p class="radioChoice">round</p>
                </label>
                <br>
                <input class="input13" type="radio" id="square" name="isPrevRel" value="square">
                <label for="birthcombo">
                    <p class="radioChoice">Square</p>
                </label>
                <br>
                <a class="text2button radio" onclick="displayquestion(14)">Next</a>
            </div>
            <div data-toggle="buttons" class="questionholder multiplechoice" id="question14" style="display:none">
                <h5>Do you like snow?</h5>
                <input class="input14" type="radio" id="yes" name="snow" value="yes">
                <label for="yes">
                    <p class="radioChoice">Yes. If you'd like, explain why</p>
                </label>
                <input class="input14" type="radio" id="no" name="snow" value="no">
                <label for="no">
                    <p class="radioChoice">No</p>
                </label>
                <br>
                <input name="relSNonID1"><br>
                <a class="text2button radio" onclick="displayquestion(15)">Next</a>
            </div>
        </form>
    </body>
</html>

我的javascript函数有问题，该函数可以按预期与输入文本字段和单选按钮一起使用，但不能在将两者结合使用时出现问题。

简而言之，我有一个div，它问一个问题，其中包含一对单选按钮，一个文本输入和一个next按钮。当用户单击下一步时，函数displayquestion（a）触发。

该函数检查是否被告知忽略当前问题。如果是这样，它将隐藏div并显示下一个问题。

如果不是，它将检查文档是否包含输入类别为input＃（其中＃对应于div id的问题＃）的输入是单选输入。如果是，它将检查是否选择了一个单选选项。如果未选择任何内容，则会显示一条错误消息。

否则，如果输入不是无线电输入，它将检查输入是否为空白。如果为空，则显示错误消息。如果不为空，则会隐藏div。

它可以按预期工作，但前提是显示的div仅包含单选选项集或文本输入。

如您所见，我有一个问题，必须在何处选择单选，并带有可选的文本输入。

预期的结果应该是显示错误消息，直到用户进行单选为止。文本输入是否完成并不重要。仅当选择了单选选项并且用户单击下一步时，才应隐藏div。

相反，发生的是div隐藏了用户是什么都不做还是做出选择。

从我收集到的信息来看，问题源于

document.querySelector('input[type=radio]:checked')

即使用户看到问题14（第二个div），条件似乎仍会保留问题13（第一个div）的值。我知道这是因为在两个div上单击“下一步”时，控制台日志将打印相同的值。

我相信是因为我没有检查输入+ b，但是我无法添加变量。什么是正确的整合？

jsfiddle

1 个答案:

答案 0 :(得分：1)

您的主要问题是，当您测试选中的单选按钮时，它将检查页面中的所有单选按钮，而不仅仅是当前可见问题中的单选按钮。这不是变量“保留”其值的情况，只是选择器的范围太宽，它将返回找到的第一个选定复选框-在这种情况下，碰巧上一个问题已经存在，因此它将返回。

几个小的更改可以使a）使您的代码更高效（减少对同一事物的重复查询，并b）解决您的问题

1）为了提高效率和可读性，请将document.querySelector('input.input' + b);的结果放入变量中，这样就不必在if语句中重复运行同一查询

2）检查是否在当前问题内中选择了单选按钮，请在选择器上添加一个限制，以将范围缩小到当前问题：document.querySelector("#question" + b + " input[type=radio]:checked")

3）出现错误，阻止在第一个问题中选择“平方”选项-随附标签的for属性错误，应为<label for="square">

顺便说一句，我认为不可能或不可能将两个测试（如您在评论中提到的）结合起来，因为它们不会做相同的事情。第一个测试检查问题中第一个输入是哪种输入，第二个测试检查该输入的状态（一旦我们知道它肯定是一个单选按钮）。

演示：

function displayquestion(a, ignore) {
  var b = a - 1;
  var currentInput = '';
  var questions = document.getElementsByClassName("questionholder");
  var showRequired = document.getElementById("requiredMessage");

  function showNext() {
    showRequired.style.display = "none";

    for (var i = 0; i < questions.length; i++) {
      questions[i].style.display = "none";
    }

    var nextQuestion = document.getElementById("question" + a);

    if (nextQuestion !== null) {
      nextQuestion.style.display = "block";
    }
  }

  // Check if question should ignore inputs
  if (ignore == 1) { // yes, ignore the inputs so move on to next question
    console.log("path 1");

    showNext();

  } else { //no, don't ignore the inputs
    var input = document.querySelector('input.input' + b);
    if (input.type == "radio") { //this is a radio input				
      if (document.querySelector("#question" + b + " input[type=radio]:checked")) { //a radio option is selected
        console.log("path 2");

        showNext();

      } else { // no radio option is selected so show error					
        console.log("path 3");

        showRequired.style.display = "block";
      }
    } else { // not a radio input
      if (input !== null) {
        var currentInput = input.value;
      }

      if (currentInput == '') { // the input is blank so show error
        console.log("path 4");

        showRequired.style.display = "block";

      } else { // the input is not blank so move on to next question
        console.log("path 5");

        showNext();
      }
    }
  }
}
body {
  font-family: arial;
}

h1 {
  font-size: 0.75em;
}

h5 {
  font-size: 0.5em;
  line-height: 1.5em;
  margin-block-start: 0;
  margin-block-end: 0;
}

h6 {
  font-size: 0.35em;
  margin-block-start: 0;
  margin-block-end: 0;
}

br {
  line-height: 0.2em;
}

p {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.Title {
  text-align: center;
  font-size: 3em;
  text-decoration: underline;
}

form {
  margin: 0 auto;
  width: 75%;
  text-align: center;
  font-size: 3em;
}

form#filledForm {
  display: table;
  table-layout: fixed;
  margin: 0 auto;
  width: 100%;
  font-size: 1em;
}

form#filledForm th {
  text-align: left;
}

form#filledForm td {
  width: auto;
  font-size: 0.75em;
  vertical-align: bottom;
}

form#filledForm tr.aligncenter td {
  font-size: 0.75em;
  vertical-align: initial;
}

form#filledForm input[name=relSNonID1] {
  margin-top: 0;
}

form#filledForm input[name=relSNonID2] {
  margin-top: 0;
}

.questionholder {
  display: none;
}

input {
  line-height: 1em;
  font-size: 1em;
  text-align: center;
  width: 100%;
  margin-bottom: 0.5em;
}

input[name=relSNonID1] {
  margin-top: 0.2em;
}

input[name=relSNonID2] {
  margin-top: 0.2em;
}

input[type=radio] {
  margin-bottom: 0;
  visibility: hidden;
}

input[type="radio"]:checked+label {
  border-style: solid;
  padding: 10px;
}

div[data-toggle="buttons"] label.active {
  color: #7AA3CC;
}

div[data-toggle="buttons"] label {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

div[data-toggle="buttons"] label:hover {
  color: #7AA3CC;
}

div[data-toggle="buttons"] label:active,
div[data-toggle="buttons"] label.active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.text2button {
  border-style: solid;
  padding: 10px;
  cursor: pointer;
}

.multiplechoice {
  line-height: 0.5em;
}

.radio {
  line-height: 2em;
}

.radioChoice {
  font-size: 0.5em;
  cursor: pointer;
}

#result p {
  text-align: center;
  font-size: 2em;
}
<div id="requiredMessage" style="display:none">
  <p>This field is required.</p>
</div>

<form id="TheForm" style="display:block;">
  <div data-toggle="buttons" class="questionholder multiplechoice" id="question13" style="display:block">
    <h5>The world is... </h5>
    <input class="input13" type="radio" id="round" name="isPrevRel" value="round"><label for="round"><p class="radioChoice">round</p></label><br>
    <input class="input13" type="radio" id="square" name="isPrevRel" value="square"><label for="square"><p class="radioChoice">Square</p></label><br>
    <a class="text2button radio" onclick="displayquestion(14)">Next</a>
  </div>
  <div data-toggle="buttons" class="questionholder multiplechoice" id="question14" style="display:none">
    <h5>Do you like snow?</h5>
    <input class="input14" type="radio" id="yes" name="snow" value="yes"><label for="yes"><p class="radioChoice">Yes. If you'd like, explain why</p></label>
    <input class="input14" type="radio" id="no" name="snow" value="no"><label for="no"><p class="radioChoice">No</p></label><br>
    <input name="relSNonID1"><br>
    <a class="text2button radio" onclick="displayquestion(15)">Next</a>
  </div>
</form>

相关问题
最新问题