卡在多个if语句的for循环中

Question

很抱歉，如果标题设置不正确，因为我不知道是什么原因，但是我的循环始终会导致“ false”语句。

直截了当，这是code，与以下相同，如果有人愿意在Codepen中进行检查。

function Validation() {
	if(!ValidateForm()) {
		document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
		return false;
	} else {
		document.getElementById("errorBox").innerHTML = ""
		alert("Thank you for your cooperation");						
	}
}
function ValidateForm() {
	var a = document.getElementsByName('Activity');
	var v = document.getElementsByName('Volunteers');
	//var e = document.getElementsByName('Name');
							
	for (var i = 0; i<a.length; i++) {
		if (a[i].type == 'checkbox') {
			if (a[i].checked) {
        
        for (var j = 0; j<v.length; j++) {
		      if (v[j].type == 'checkbox') {
			      if (v[j].checked) {
              alert("it werks!!")
              return true;
            }
          }
        }
        return true;
      } else {
       return false;
      }
    }
  }
}

<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
    <div class="row" style="margin-top: 20px;">
		  <div class="col-sm-12">
			  <div class="form-group">
				  <p>
					<b>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can choose one or more options as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
						<input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
						<input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
						<input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
						<input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
						<input type="checkbox" id="Activity6" name="Activity" value="zmps" > 6<br>
						<input type="checkbox" id="Activity7" name="Activity" value="sumica" > 7<br>
						<input type="checkbox" id="Activity8" name="Activity" value="blood" > 8<br>
						<input type="checkbox" id="Activity9" name="Activity" value="volunteer" > 9<br>
					</div>
				</div>
			</div>
		</div>
    <div class="row" style="margin-top: 20px;">
		  <div class="col-sm-12">
			  <div class="form-group">
				  <p>
					<b>2. How much time are you prepared to spend as volunteer?</b>
					</p>
					<p style="margin-left: 16px;">
					(You can only choose one option as your answer)
					</p>
					<div style="margin-left: 35px;">
					  <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
						<input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
						<input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
						<input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
						<input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
						<input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
						<input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
						<input type="text" placeholder="other" /><br>
					</div>
				</div>
			</div>
		</div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
    <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>

我想做的是使函数能够检查表格。给定的代码当然只是一个演示，因为我的表单更加广泛。 该代码应该检查一个答案，如果被选中，请检查下一个，依此类推... 我曾尝试将if语句分开，但这只会导致在检查完第一个答案之后，代码将像填充整个表单一样发送消息。

在我们讨论的过程中，如果表单中有一个带有复选框答案的问题，说其他（写您的答案），我将如何制作一个代码，该代码首先检查该复选框是否被选中，然后再检查输入内容还被给予了吗？

对于问题的第二部分，以及在第一部分发现错误并纠正我的问题，我将不胜感激。

编辑：： 使用console.log测试了代码，只有在选中第一个问题中的所有复选框和第二个问题中的单选框之后，表格才被标记为正确答案。

另一个结论，似乎是由于某种原因，仅对于第一个问题中的某些答案，代码将认为未对它们进行检查，而对于其他问题（如第一个答案），代码将接受它并继续以正确的形式回答。有什么解释吗？

Answer 1

我已经检查了您的代码，由于您正在检查

，因此循环出现了问题

if (a[i].checked) {

，如果未选中，则返回false。这是问题所在，如果未选中第一个复选框，则不会检查下一个活动复选框。

Answer 2

因此，如果我没看错，那么如果类型为“ radio”，则为“ Volunteers”，但是在代码中正在检查“ checkbox”。 认为这显然应该导致总是退出第二个循环。

为了进行快速调试，我还建议放置一些console.log语句，这样您就可以在浏览器控制台中看到您的代码得到了多大的作用...

Answer 3

所以我遍历了代码，发现问题是return false和return true，

可以正常工作的新代码如下：

function Validation() {
  if(!ValidateForm()) {
    document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
      return false;
  } else {
    document.getElementById("errorBox").innerHTML = ""
    alert("Thank you for your cooperation");						
  }
}

function ValidateForm() {
  var a = document.getElementsByName('Activity');
  var v = document.getElementsByName('Volunteers');    							
  for (var i = 0; i<a.length; i++) {
    //console.log(a[i]);
    if (a[i].checked) {
      for (var j = 0; j<v.length; j++) {
        if (v[j].checked) {
          console.log(a[i],",",v[j])
          return true;
        }
      }
    }
  }
}

<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
<div class="row" style="margin-top: 20px;">
  <div class="col-sm-12">
    <div class="form-group">
	    <p>
	    <b>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
	    </p>
	    <p style="margin-left: 16px;">
        (You can choose one or more options as your answer)
	    </p>
	      <div style="margin-left: 35px;">
	        <input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
	        <input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
	        <input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
	        <input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
	        <input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
	        <input type="checkbox" id="Activity6" name="Activity" value="zmps"> 6<br>
	        <input type="checkbox" id="Activity7" name="Activity" value="sumica"> 7<br>
	        <input type="checkbox" id="Activity8" name="Activity" value="blood"> 8<br>
	        <input type="checkbox" id="Activity9" name="Activity" value="volunteer"> 9<br>
	      </div>
      </div>
    </div>   
  </div>   
  <div class="row" style="margin-top: 20px;">
    <div class="col-sm-12">
      <div class="form-group">
        <p>
        <b>2. How much time are you prepared to spend as volunteer?</b>
        </p>
        <p style="margin-left: 16px;">
          (You can only choose one option as your answer)
        </p>
        <div style="margin-left: 35px;">
          <input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
          <input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
          <input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
          <input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
          <input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
          <input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
          <input type="radio" id="Volunteers7" name="Volunteers" value="other" > 
          <input type="text" placeholder="other" /><br>
        </div>
      </div>
    </div>
  </div>
  <button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
  <div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>