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.
Check all or Un check all a group of Checkboxes
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><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)">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
$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
This article is written by plus2net.com team.
More on CheckBox & PHP
Checkbox: Using checkbox with PHP Scripts
Validation: Checking the user input of a checkbox and showing message
Checkbox Array: Handling a group of checkbox by array
Disable checkbox: Disable and enable checkbox by clicking button
Disable Text box : Disable a textbox by a checkbox
Limit Checkbox : Limiting the number of checkbox can be checked by user
Check All : Checking or unchecking a group of checkbox by button or at single point
Validation: Checking the user input of a checkbox and showing message
Checkbox Array: Handling a group of checkbox by array
Disable checkbox: Disable and enable checkbox by clicking button
Disable Text box : Disable a textbox by a checkbox
Limit Checkbox : Limiting the number of checkbox can be checked by user
Check All : Checking or unchecking a group of checkbox by button or at single point
More on JavaScript form Validation
Javascript Form Validation Email Validation Disabling the submit button till all the elements of the form are validated getElementById to access form elements with event handlersPeriod button Validation of a formdisabling Period button by a checkboxCheckbox
How to limit number of checkboxes allowed to be clicked inside a formCheckbox Validation of a formDisplaying checked value of a check box arraydisabling checkbox by button clickEnable or disable of a text box by a checkboxAll Checking & Un checking in a group of checkboxes by single buttonListBox:
Adding options to a drop down list boxRemoving options from a drop down list boxMoving options from one drop down list box to otherDynamic population of second list box based on value of first list box
Datalist adding options
| 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 | |
| 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!!! | |
| smo1234 | 09-10-2015 |
| thanks , added now. | |