驗證是否已選中所有單選按鈕，或者驗證按鈕是否未單擊

Question

我對Java語言非常陌生，並且具有單擊按鈕時調用的Javascript函數。 我想做的是顯示一個警報，如果未選中所有單選按鈕（是或否），並且都已選中，則調用下面的另一個函數addPoints（）。

function validateForm(){

    var inputs = document.querySelectorAll('input[type="radio"]');
       var  formValid = false;
       for(var i=0;i<inputs.length;i++){
           if(inputs[i].checked){
               formValid  = true;

            }
       }
      if(!formValid ){   
           alert("Please answer all questions!");
       }

else{

addPoints();

}
} 

以下是我的單選按鈕的顯示方式

<form name="form1" id="form1">
<input id="rdo1" type="radio" name="q1" value="10">Yes<br>
<input id="rdo2" type="radio" name="q1" value="0">No
</form>

<form name="form2" id="form2">
<input id="rdo3" type="radio" name="q2" value="10">Yes<br>
<input id="rdo4" type="radio" name="q2" value="0">No
</form>

 <form name="form3" id="form3">
<input id="rdo5" type="radio" name="q3" value="10">Yes<br>
<input id="rdo6" type="radio" name="q3" value="0">No
</form>

<button type="submit" onclick="validateForm()">Score?</button>

如果在頁面加載時沒有選擇任何單選按鈕，並且使用該按鈕調用了validateForm（）函數，則消息正確，並顯示“請回答所有問題”。 如果我從任何組中選擇是或否，它將調用addPoints函數。 我只希望當從“所有”廣播組中選擇“是”或“全部”時才調用該函數。

Answer 1

DEMO

碼：

function addPoints() {
    alert("Adding points");
}

function validateForm() {

    var inputs = document.querySelectorAll('input[type="radio"]'),
        // An empty array
        checker = [];

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            // Whenever find a checked element, push it in checker array
            checker.push(true);
        }
    }

    // Since, there are only 3 radio groups, according to OP,
    // call addPoints when all 3 (yes/no) have been selected
    if (checker.length === 3) {
        addPoints();
    }
    // Show an alert if none has been selected
    else if (checker.length === 0) {
        alert("Please answer all questions!");
    } else {
        // Add something you may want
    }
}

Answer 2

而不是遍歷每個單選按鈕，而是遍歷每個表單，並在每個表單中遍歷單選按鈕

Answer 3

您可以使用Jquery做到這一點，就像我用Check Boxes :)

function validateForm(){

  if($('input[type="checkbox"]:checked').length != $('input[type="checkbox"]').length){
               alert("Please answer all questions!");
        }else{
               alert("ok!");
     }
}