Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Check All/Clear All links for dynamic check-boxes

In forms when using check boxes for a list of records that is generated dynamically (example: display of messages in your yahoo or hotmail inbox) you might want a simple feature of checking or clearing all the check boxes related to those records before deleting or moving. Use this simple script to do just so.

Example

Example of Check All/ Clear All links for dynamically created check boxes

Check All Clear All

Name	Email ID	Phone	Address

Anita Sudhakar	anita@smartwebby.com	2452352555	307, Park Avenue
Sean T.P	stp@hotmail.com	5223523523	52, Alpine Apts
Priscilla David	prisdav76@yahoo.com	5437637676	No.211, Lien Towers
Robbie James	robbie_james@aol.com	2453465743	22, Oak Street

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

Java-script Code

HTML Code

Instructions

Make sure that if you change the name of the form you also specify it in the Javascript in the line :
var form='frmSample'
Make sure that while renaming the check boxes from 'chkSample' you do a find and replace to change it everywhere as the name of the check boxes is used while calling the javascript functions in the links and the form on submit action.

Explanation of the Code

The JavaScript has two functions:

Function SetChecked is used to check and clear the check boxes : Here we find all elements in the form which are check boxes with a given name (this name is sent through the link, so you can have more then one check/clear all link).

Example for the Check All link we have the following code <a href="javascript:SetChecked(1,'chkSample')">

If the boxes need to be checked the property 'checked' of the elements is set to 1 and 0 if they are to be cleared. To do this we send the value 1 or 0 through the link.
Function ValidateForm is used to validate the form to see if at least one check box is ticked on submission : Here we check all the check boxes with the given name to see if at least one is checked. If one is found then we return true to the form submission else we return false and an alert message.