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 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


<!-- 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 -->

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"
<input type="button" name="Un_CheckAll" value="Uncheck All"

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 : 14


More on CheckBox & PHP
Thank you! This is exactly what I was looking for!
Thank you ! But, how you get values? you have only the last value by the last checkbox checked?? !!
Get values by chk[i].value and set values by chk[i].value = "value";
Firdaous Nizami26-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...
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.
Thank you! Nice 1!
Nice Tutorial!!!!
Does this work without forms? What if I want to check checkboxs with the same name in a specific div tag?
Dhanapal10-08-2012`s works........... thank ypu
many many thanks...
If you want to get all Checked values in form name should be name="check-list[]".
Thank you it worked
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.
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:)

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

Form Validation in JavaScript
Checkbox Validation of a form

HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2015 All rights reserved worldwide Privacy Policy Disclaimer