How do I check all checkboxes on an HTML page with one click (Array of checkboxes)

Question

I have the following HTML:

<form name="smform" id="smform" method="post" action="">
      <input type="checkbox" name="Check_All" onClick="Check(document.smform.check)"  >

     <input type="checkbox" name="check" value="blue_color"> Blue<br>
     <input type="checkbox" name="check" value="green_color"> Green<br>
     <input type="checkbox" name="check" value="orange_color"> Orange<br>
</form>

With the this JS:

function Check(chk)
    {
        if(document.smform.Check_All.checked){
        for (i = 0; i < chk.length; i++)
        chk[i].checked = true ;
        document.smform.Check_All.checked = true;
    }else{

        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        document.smform.Check_All.checked = false;
    }
}

And this this is working fine, I can select or deselect all checkboxes, but in order to post this as an ARRAY, my check boxes will have the name="check[]" like:

     <input type="checkbox" name="check[]" value="blue_color"> Blue<br>
     <input type="checkbox" name="check[]" value="green_color"> Green<br>
     <input type="checkbox" name="check[]" value="orange_color"> Orange<br>

But in this case my JS is not working. How can I adapt this JS so it works with name="check[]" ?

All help is appreciated.

Jamiec · Accepted Answer · 2011-10-14 14:51:13Z

5

Just dont use dot-notation, instead use square brackets and a string:

onClick="Check(document.smform['check[]'])"

Live example: http://jsfiddle.net/5JCMS/

answered Oct 14, 2011 at 14:51

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayantha Lal Sirisena · Accepted Answer · 2011-10-14 14:56:37Z

2

you can use getElementsByTagName to get all checkboxes

var inputs = document.getElementsByTagName("input");
Check(inputs);
    function Check(chk)
        {
            if(document.smform.Check_All.checked){
              for (i = 0; i < chk.length; i++){
                if(inputs[i].type == "checkbox"){
                    chk[i].checked = true ;
                }
               }
            document.smform.Check_All.checked = true;
        }else{

            for (i = 0; i < chk.length; i++){
               if(inputs[i].type == "checkbox"){
            chk[i].checked = false ;
             }
           }
            document.smform.Check_All.checked = false;
        }
    }

answered Oct 14, 2011 at 14:56

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:27:33Z

-3

Use Jquery. You can add a class to all the checkboxes you wish to check

<input type='checkbox' class='autocheckable someOtherClass' />Blue

And then do as described here: Setting "checked" for a checkbox with jQuery?

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Oct 14, 2011 at 14:50

immutabl

6,89413 gold badges47 silver badges76 bronze badges

4 Comments

Jamiec Over a year ago

Its seen as a bit of a cardinal sin round here to answer a question not taged jQuery with a jQuery answer.

Matt Over a year ago

There is JavaScript outside of jQuery

jackJoe Over a year ago

Even though, this gives an idea/suggests using classes in standard javascript and then calling the class to check the checkboxes, the OP can use this without jQuery.

immutabl Over a year ago

3 downvotes! Sheeesh. Well Ok. I assume the poster is learning - no one coding for money in the real-world would do this without JQuery ;-)

Collectives™ on Stack Overflow

How do I check all checkboxes on an HTML page with one click (Array of checkboxes)

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related