在检查我的复选框数组是否全部未选中后，如何显示此警告框

Question

Hi guys i am creating a validation for checking if the user has selected at least one stand by checking it, if no stands are selected then an alert box should display telling the user to select at least one stand. my javascript function is triggered onsubmit.

my code is

 function checkstanddocument(){ 

 ab = document.getElementById("repo_document_form").elements[['stands[]']];   
  for (var i = 0; i <= ab.length; i++){

    if (ab[i].checked == true){
      return true
    }    
 }  
   alert("Please select at least one stand");
   return false
}

I thought the system will only proceed to the alert box if no checkbox is checked, but it doesn't even reach the alert box even if you checked or did not check it, and i want it to display an error if there is no checkbox checked.. can anyone tell me what have i done wrong.please cause it looks 110% correct to me.

Answer 1

the condition in your for loop is wrong, use:

for(var i = 0; i < ab.length; i++) {

< and not <=

edit:

what's this: document.getElementById("repo_document_form").elements[['stands[]']]; ?

that doesn't make sense at all to me …
i suspect the error is somewhere around that line. ( elements[[ looks really weird—is your loop entered at all?)

Answer 2

The other answers are great, but they left out one thing. You gotta check to ensure that the ab is infact an array. If there is only 1 checkbox, it will come back as a singular HTML Element.

function checkstanddocument(){
 var hasOne = false;
 ab = document.getElementById("repo_document_form").elements[['stands[]']];   
 if (ab.length != null){
    for (var i = 0; i < ab.length; i++){

      if (ab[i].checked == true){
        hasOne = true;
      }    
    }
 }
 else hasOne = ab.checked;

  if (hasOne == false) {

   alert("Please select at least one stand");
   return false

  } else {

   return true;

  }

}

Answer 3

function checkstanddocument(){
 var hasOne = false;
 ab = document.getElementById("repo_document_form").elements[['stands[]']];   
  for (var i = 0; i < ab.length; i++){

    if (ab[i].checked == true){
      hasOne = true;
    }    
 }  

  if (hasOne == false) {

   alert("Please select at least one stand");
   return false

  } else {

   return true;

  }

}

Answer 4

I find that PrototypeJS makes this sort of thing very easy using the $$() function with a CSS selector to get the controls you need.

This has the advantage of only looping over as many checkboxes are actually found so you don't have to worry about all of the loop edge conditions.

This function will display an alert if none of the checkboxes are checked (or if no checkboxes are found) and will also return true or false depending on what it finds.

function checkstanddocument() {
    var ret = false;

    $$('#repo_document_form input[type="checkbox"][name="stands[]"]').each( function(checkbox) {
        if(checkbox.checked) {
            ret = true;
            throw $break;
        }
    });

    if(!ret) {
        alert('Please select at least one stand.');
    }

    return ret;
}