SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Form Validation Checkbox

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 .

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>

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

Now let us try to achieve the same result by using single button and then by using single checkbox in next part.

Number of User Comments : 13


Google+

More on CheckBox & PHP
Maria18-11-2010
Thank you! This is exactly what I was looking for!
Mawimus18-05-2011
Thank you ! But, how you get values? you have only the last value by the last checkbox checked?? !!
Michael07-08-2011
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...
Alexander05-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.
cadetcaptain25-01-2012
Thank you! Nice 1!
Jack24-02-2012
Nice Tutorial!!!!
Phiri02-06-2012
Does this work without forms? What if I want to check checkboxs with the same name in a specific div tag?
Dhanapal10-08-2012
ya..........it`s works........... thank ypu
tonbad11-08-2012
many many thanks...
ssol22-11-2012
If you want to get all Checked values in form name should be name="check-list[]".
minm22-08-2014
Thank you it worked
Adam06-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.
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Form Validation in JavaScript
Checkbox Validation of a form



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

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer