Check or Uncheck all in a group of checkbox in JavaScript

If we have a series or a group of check boxes then we can provide one button to check all the checkboxes at one go and another button to uncheck all the checked buttons by using client side JavaScript. This way the user in a single attempt can check or uncheck all the buttons. Note that this is a client side JavaScript feature so JavaScript execution is to be enabled in the client browser.

There are different ways to achieve this result; we can keep two buttons for this. One button will check all the checkboxes and other button will uncheck all the buttons. The same result we can achieve by using a single buttons also. We can also keep one checkbox to get the same functionality. When we check the single checkbox we can make all the checkboxes checked and by uncheck we can make all the checkboxes uncheck( Inside mailbox of hotmail.com you can see this ) . Let us start with two buttons first. One for check all and other for Uncheck all .

Demo of Checkbox checkall uncheckall


Here is the JavaScript function to be kept within the head tag

<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
function CheckAll(chk) {
for (i = 0; i < chk.length; i++) chk[i].checked = true ; }
function UnCheckAll(chk) for (i = 0; i < chk.length; i++) chk[i].checked = false ; } // End --> </script>

This is the HTML code to be kept inside the body tag.


<form name="myform" action="checkboxes.asp" method="post">
<b>Scripts for Web design and programming</b><br>
<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>

<input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)">

Now let us try to achieve the same result by using single button and then by using single checkbox in next part.

Using JQuery

We can get similar result by using JQuery. The advantage less code as we will be using JQuery library. Read more on Jquery Checkbox.

Number of User Comments : 16


Google+

More on CheckBox & PHP
Maria

18-11-2010

Thank you! This is exactly what I was looking for!
Mawimus

18-05-2011

Thank you ! But, how you get values? you have only the last value by the last checkbox checked?? !!
Michael

07-08-2011

Get values by chk[i].value and set values by chk[i].value = "value";
Firdaous Nizami

26-12-2011

thanks for information, and can u understand/help me about check box while i am using it in struts framework. i.e, how can i fetch only selected items after submit of the page. please guide me if you can...
Alexander

05-01-2012

Can I use something different than "name" attribute to identify the checkbox? For example id or class or stuff? As I need to have name attribute as php array. Email me please, would be really grateful.
cadetcaptain

25-01-2012

Thank you! Nice 1!
Jack

24-02-2012

Nice Tutorial!!!!
Phiri

02-06-2012

Does this work without forms? What if I want to check checkboxs with the same name in a specific div tag?
Dhanapal

10-08-2012

ya..........it`s works........... thank ypu
tonbad

11-08-2012

many many thanks...
ssol

22-11-2012

If you want to get all Checked values in form name should be name="check-list[]".
minm

22-08-2014

Thank you it worked
Adam

06-10-2014

I am also using the name field for a php array. It seems to work fine if you just set the id field on the checkbox to id="check_list" and leave your name field as-is.
jjj

03-02-2015

Thank you so much...i was struggling alot to check all boxes whixh were in while loop ans displaying resultset but this solution is working for me.....
happy coding:)
Dileep Soni

30-05-2015

Thank you so much for nice Tutorial!!!!
Dharmendra Kumar

05-06-2015

Hey, I want to check and uncheck all check boxes in gridview (asp.net) by button click.
Pls someone help me....
Thanks

Post Comment This is for short comments only. Use the forum for more discussions.






OPINION POLL

How you handle Search Engine Optimization ( SEO ) for your website
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer