Checkbox check or uncheck all in JavaScript by button

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.

In general, having the "Check All" functionality can improve the user experience by reducing the effort required to perform repetitive actions involving multiple checkboxes.

Note that this is a client side JavaScript feature so JavaScript execution is to be enabled in the client browser.

Check all checkboxes or Un check all by using single or double buttons or checkbox in JavaScript

There are different ways to achieve this result;

Using two buttons
Using single button
Using one common checkbutton (Example: Inside our E-Mailbox )

Using two buttons

Demo of Checkbox with two buttons, 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.

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

Next : Single button and then by using single checkbox

Managing form with backed PHP script to receive data

After displaying a group of checkboxes having same name, we can send the data to back end scirpt ( PHP here ) for further processing. This is part of a form so other elements like text box , radio buttons etc can be added to the form.

<html>
<head>
<title>Checkbox in JavaScript</title>
</head>
<body>
<script>
function Check(){
chk=document.getElementsByName("my_check")[0]
chk2=document.getElementsByName('check_list[]')

if(chk.checked==true){
  for (i=0;i<chk2.length;i++)
    chk2[i].checked=true
}else{
  for (i=0;i<chk2.length;i++)
    chk2[i].checked=false
}

}


</script>
<form name=myform action=action_page.php
method=post >
<input type=checkbox name=check_list[] value=ASP>ASP<br>

<input type=checkbox name=check_list[] value=PHP>PHP<br>
<input type=checkbox name=check_list[] value=JavaScript>JavaScript<br>
<input type=checkbox name=check_list[] value=HTML>HTML<br>
<input type=checkbox name=check_list[] value=MySQL>MySQL<br>
<input type=checkbox name='my_check' value='yes' onClick=Check()>
<b>Check Control</b>
<Input type=submit value=Submit>
</form>
</body>
</html>

PHP script to receive array with selected options. Displaying the values of only checked check boxes.

<?php
$scripts=$_POST['check_list'];
echo "Scripts : ". print_r($scripts)." <br>";
echo "<a href=checkbox1.html>Back to form</a>";
$str='';
echo "<br>Following elements are checked <br>";
while (list ($key,$val) = @each ($scripts)) {
$str=$str. "$val,";
}
echo $str;
?>

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.

Restricting user selections

We can ask the user to select from a group of checkboxes but we can add one limit to the number of selections by user. User can change the selection but can't exceed the limit.
Limiting number of Checkboxes user can select
JavaScript Checkbox Reference

Subscribe to our YouTube Channel here

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.

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

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

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

cadetcaptain	25-01-2012
Thank you! Nice 1!

Jack	24-02-2012
Nice Tutorial!!!!

tonbad	11-08-2012
many many thanks...

minm	22-08-2014
Thank you it worked

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

sohel	28-09-2015
function UnCheckAll does not have ' { ' other than that nice explanation! Cheers!!!

Check or Uncheck all in a group of checkbox in JavaScript

Using two buttons

Managing form with backed PHP script to receive data

Using JQuery

Restricting user selections

Subscribe