Javascript Check and Uncheck All Checkboxes
By Nannette Thacker - 04/27/2000

6/7/01 update: Please see a response to a letter on this article for further details on how to check if there is only ONE checkbox in a set. (For instance, if you are building your set from a table and don't know if there is more than one checkbox in the set or not.) Letters

By passing the checkbox group's name to the onclick event of the buttons, you can check and uncheck all checkboxes dynamically. You don't need to hard code the name of the checkbox or know the number of check boxes in the group. The code takes care of this automatically.

Your Favorite Scripts & Languages
Java
Javascript
Active Server Pages
HTML
SQL

Here is the javascript:

<SCRIPT LANGUAGE="JavaScript">
<!-- 	
// by Nannette Thacker
// http://www.shiningstar.net
// This script checks and unchecks boxes on a form
// Checks and unchecks unlimited number in the group...
// Pass the Checkbox group name...
// call buttons as so:
// <input type=button name="CheckAll"   value="Check All"
	//onClick="checkAll(document.myform.list)">
// <input type=button name="UnCheckAll" value="Uncheck All"
	//onClick="uncheckAll(document.myform.list)">
// -->

<!-- Begin
function checkAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = true ;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = false ;
}
//  End -->
</script>


Here is the HTML:

<form name="myform" action="checkboxes.asp" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>

Check out The JavaScript Source for some of the BEST javascripts!

Check out this COOL RGB/HEX Converter chart! http://javascript.internet.com/calculators/rgb-slider.html