Using single button & Checkbox check or uncheck all

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>

JavaScript Checkbox Reference

Subscribe to our YouTube Channel here

Check or Uncheck all using single button

Subscribe