Check or Uncheck all using single button

In previous tutorial we have seen how two buttons are used to check all and uncheck a group of checkboxes. Now we will try the same by using single button and then by using single checkbox.

Demo of checkall - uncheckall by single button

Here is the code for single button.
Here is the single function we use inside our head tags.

<SCRIPT LANGUAGE="JavaScript">
<!--

<!-- Begin
function Check(chk)
{
if(document.myform.Check_All.value=="Check All"){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
document.myform.Check_All.value="UnCheck All";
}else{

for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
document.myform.Check_All.value="Check All";
}
}

// End -->
</script>



Now the html part

<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="Check(document.myform.check_list)">

</form>

Script with a single check box


Here is the code for head part of the script

<SCRIPT LANGUAGE="JavaScript">
<!--

<!-- Begin
function Check(chk)
{
if(document.myform.Check_ctr.checked==true){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}else{

for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
}

// End -->
</script>

Here is the code for body part .

<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="checkbox" name="Check_ctr" value="yes"
onClick="Check(document.myform.check_list)"><b>Check Control</b>

</form>
Visitors Rating
Your Rating




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

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-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer