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.
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