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 .
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.
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
belajarhebat
04-08-2015
thanks for information. good job :) !!
AAAA
07-08-2015
Thank you Very Nice Explanation...........
sohel
28-09-2015
function UnCheckAll does not have ' { ' other than that nice explanation! Cheers!!!
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.
More on JavaScript form Validation