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.
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!
Home
ASP.NET
- ASP.net Articles
ASP, DHTML, HTML
- HTML Tutorial
- Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!
- ASP Driven DHTML Slider Menus REVISITED One Year Later! Part II
- ASP Driven DHTML Slider Menus
- ASP Driven HTML Outlines
- Reusing Code with ASP Include Files and Subroutines
Security
- Hacker Query Check
- .htr IIS Security Issue
Databases, Cookies
- Functions to Open a Database Connection and Record Set
- Setting Up and Using OraSession to Manage Your Oracle Database Objects
- Storing Non-Durable Data for Cookie-less Sessions
Javascript
- Smart Popups
- Javascript: Validate Numeric Fields
- Javascript Confirm Form Submission
- Javascript Dynamic Text Area Counter
- Javascript: Check All and Uncheck All Check Boxes
- Javascript Field Validations -- Client Side Scripting
Miscellaneous
- Tree Select Demo
- Adobe Extension Manager
- Scandisk & Defrag Pointers
Standards & Style
- Setting Up Your Own ASP Development Templates
- Creating a Project Template for Estimations of Time, Tasks, and Resources
- To Host or Not To Host
- ASP Naming Conventions
- HTML Naming Conventions & Visual Interdev HTML Generation
- Working with and in spite of the Visual Interdev Design Mode
- Commenting Your ASP Source Code
Letters!
- Reader Letters
