my javascript has some mistake in checkbox checking

Question

I have a problem in my javascript. All I want to do is if my user doesnt select any checkbox out given 10 checkboxes then I want to give him an alert else submit the form. I have written a js code but thats not working even if checkbox is checked. Please point me out my mistake. Heres my code.

window.onload = function() {

    document.getElementById('submitbtn').onclick = function() {
                    var count = 0;
                    if(document.getElementById("pid1").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid2").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid3").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid4").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid5").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid6").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid7").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid8").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid9").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid10").checked == "checked")
                    {
                        count++;
                    }
                    alert(count);
                    if(count == 0){
                    alert("Please select atleast 1 product");
                    return false;}
                    else{
                        document.getElementById("formreturn").submit();
                        return false;}
                };
    };

a checkbox element's .checked property is either true or false, not "checked" — gabereal
– gabereal, Commented Nov 28, 2014 at 8:10
@ArCiGo My html file doesnt have any problem and checkbox are also right. The same js code has worked for first time but after lil bit changes it didnt work. And it always show count = 0 even if checkboxes are checked. — MukulAgr
– MukulAgr, Commented Nov 28, 2014 at 8:12
@MukulAgr Check the answers of abhitalks, gabereal and AKX, are the correct way. — ArCiGo
– ArCiGo, Commented Nov 28, 2014 at 8:16

Abhitalks · Accepted Answer · 2014-11-28 08:18:34Z

You should check the checked property for truthy/falsy, because the checked property is a boolean. Like this:

if (document.getElementById("pid8").checked) { ..

Even in HTML you don't need to assign the string "checked" to the "checked" attribute. Only the presence of this attribute is enough.

You can re-write this:

<input type="checkbox" checked="checked" />

as this:

<input type="checkbox" checked />

In fact you can assign anything to it and it will be ignored and treated as presence.

This will also work:

<input type="checkbox" checked="DoNotCheck" />

I see that you are trying to count the number of checked checkboxes. You could do that easily by using a querySelectorAll.

See this Snippet:

document.getElementById('btn').onclick = function() {
    var l = document.querySelectorAll("input[type=checkbox]:checked").length;
    document.getElementById('result').innerText = l;
}

<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<hr />
<input id="btn" type="button" value="Go" />
<p id="result" ></p>

Beri · Accepted Answer · 2014-11-28 08:11:37Z

2

Your answer: use checked attribute, it is a boolean, so you don't need to compare it to 'checked'.

Secondly: rewrite it, so there is less code :)

        var count = 0;
        for (var index = 1; index<= 10; index++){
           if(document.getElementById("pid" + index).checked){
                    count++;
           }
        }

answered Nov 28, 2014 at 8:11

Beri

11.6k4 gold badges38 silver badges59 bronze badges

1 Comment

Abhitalks Over a year ago

Nitpick: use checked attribute: No. We use checked property. Attribute doesn't change. Property does.

Smile0ff · Accepted Answer · 2014-11-28 08:15:52Z

2

<form action="some.php" id="myForm" method="POST">
    <input type="checkbox" name="some1" value="" id="some1">
    <label for="some1">title of checkbox 1</label>
    <input type="checkbox" name="some2" value="" id="some2">
    <label for="some2">title of checkbox 2</label>
    <input type="checkbox" name="some3" value="" id="some3">
    <label for="some3">title of checkbox 3</label>
</form>


$(function(){

    var form = $("#myForm");

    form.submit(function(e){

       if(form.find("input[type=checkbox]:checked").length > 0){

       } else{

       }

    });

});

answered Nov 28, 2014 at 8:15

Smile0ff

7988 silver badges18 bronze badges

Comments

AKX · Accepted Answer · 2014-11-28 08:13:22Z

1

Assuming pidX are inputs of type checkbox, you don't need to compare .checked to "checked".

Also, use a loop...

window.onload = function() {
    document.getElementById('submitbtn').onclick = function() {
        var count = 0;
        for(var i = 1; i <= 10; i++) {
            if (document.getElementById("pid" + i).checked) {
                count++;
            }
        }
        alert(count);
        if (count == 0) {
            alert("Please select at least 1 product");
            return false;
        }
        document.getElementById("formreturn").submit();
        return false;
    };
};

answered Nov 28, 2014 at 8:13

AKX

171k16 gold badges146 silver badges228 bronze badges

Collectives™ on Stack Overflow

my javascript has some mistake in checkbox checking

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related