卡在多個if語句的for循環中

Question

抱歉，如果標題設置不正確，因為我不知道是什么原因，但是我的循環始終會導致“ false”語句。

直截了當，如果有人想在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>