I have multiple checkboxes and I would like to know if one of them is checked. My code does not give me any error, but I don't get the results I am expecting. When I run the code always get the first alert which is inside the for loop. The following is my code:

function validate(){


    if(document.getElementById('postTW').checked || document.getElementById('postFB') ){

        var checker = document.getElementsByName('twitter[]');
        for (var i = 0; i < checker.length; i++) {
            if(checker[i].checked){
                return true;
            }

            else{

                alert("Not enough arguments ");

                return false;
            }
        };

    }


    else{
        alert("Not enough arguments to submit the form");

        return false;
    }

}

My form is method = post and looks like the following

<input class="twGroup" type="checkbox" name="twitter[]" value="x"/> 
<input class="twGroup" type="checkbox" name="twitter[]" value="y"/>
<input class="twGroup" type="checkbox" name="twitter[]" value="z"/>

I have multiple checkboxes and I would like to know if one of them is checked. My code does not give me any error, but I don't get the results I am expecting. When I run the code always get the first alert which is inside the for loop. The following is my code:

function validate(){


    if(document.getElementById('postTW').checked || document.getElementById('postFB') ){

        var checker = document.getElementsByName('twitter[]');
        for (var i = 0; i < checker.length; i++) {
            if(checker[i].checked){
                return true;
            }

            else{

                alert("Not enough arguments ");

                return false;
            }
        };

    }


    else{
        alert("Not enough arguments to submit the form");

        return false;
    }

}

My form is method = post and looks like the following

<input class="twGroup" type="checkbox" name="twitter[]" value="x"/> 
<input class="twGroup" type="checkbox" name="twitter[]" value="y"/>
<input class="twGroup" type="checkbox" name="twitter[]" value="z"/>

• javascript
• html

• 1 can you also post your markup/fiddle? – Yaje Commented Jul 15, 2014 at 6:38
• 1 Can you show some html of your page ? – nraina Commented Jul 15, 2014 at 6:39
• 1 This will only test the first checker. – Bart Calixto Commented Jul 15, 2014 at 6:40
• 1 @Arjuna I just edited my question, you can see part of the form now – Alexander Commented Jul 15, 2014 at 6:44
• @Bart How can I iterate through all the checkboxs, thanx in advanced – Alexander Commented Jul 15, 2014 at 6:45

6 Answers 6

This code checks only 1st checkbox because of return:

for (var i = 0; i < checker.length; i++) {
    if(checker[i].checked) {
        return true;
    } 
    else {
        alert("Not enough arguments ");
        return false;
    }
};

Try this:

var checked_flag = false;
for (var i = 0; i < checker.length; i++) {
    if(checker[i].checked) {
        checked_flag = true;
    }         
};
return checked_flag;

Are there logic errors in the following code?

for (var i = 0; i < checker.length; i++) {
        if(checker[i].checked){
            return true;
        }

        else{

            alert("Not enough arguments ");

            return false;
        }
    };

I assume you want something like this:

var flag=false;
for (var i = 0; i < checker.length; i++) {
            if(checker[i].checked){
                flag=true;
            }
        };
if (!flag){
        alert("Not enough arguments ");
}

Use a flag that will return false if any checkbox of name twitter[] is not checked

function validate(){
 if(document.getElementById('postTW').checked || document.getElementById('postFB').checked ){
   var result = true;
    var checker = document.getElementsByName('twitter[]');
    for (var i = 0; i < checker.length; i++) {
        if(!checker[i].checked){
            alert("Not enough arguments ");
            result = false;
            return;
        }
    };
}
else{
    alert("Not enough arguments to submit the form");
    result = false;
}
return result

}

Looks like you have a logical error in your code. As written, if the first checkbox is not checked, then you will fall through to the else statement and display the alert. You should simply get rid of the first else statement and move the first alert outside of the for-loop:

function validate() {
    if(document.getElementById('postTW').checked || document.getElementById('postFB') ) {
        var checker = document.getElementsByName('twitter[]');
        for (var i = 0; i < checker.length; i++) {
            if(checker[i].checked){
                return true;
            }
        };

        // else fall through
        alert("Not enough arguments ");
        return false;
    }
    else {
        alert("Not enough arguments to submit the form");
        return false;
    }
}

wrap your checkboxes around <form> element. Example shown:

<form name="myform">
    <input type="checkbox" name="twitter[]" />
    <input type="checkbox" name="twitter[]" checked="checked" />
    <input type="checkbox" name="twitter[]" />
    <input type="checkbox" name="twitter[]" checked="checked" />
    <input type="checkbox" name="twitter[]" />
</form>

Apply Javascript as shown.

    if (document.getElementById('postTW').checked || document.getElementById('postFB')) {
        var myform = document.forms.myform;
        var elems = myform.elements['twitter[]'];
        for (var i = 0; i < elems.length; i++) {
            if (elems[i].checked) {
                return true;
            }
        }
        alert("Not enough arguments to submit the form");
        return false;

    } else {
        alert("Not enough arguments to submit the form");
        return false;
    }

Don't you think you should write:

if(document.getElementById('postTW').checked || document.getElementById('postFB').checked ){

instead of:

if(document.getElementById('postTW').checked || document.getElementById('postFB') ){