|
|
Check or Uncheck all in a group of checkbox in JavaScriptIf 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 demo.
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)">
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
| | | 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"; | | 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[]".
|
|
|
|
|
|
|
