Javascript Tutorials

Check/Clear All links

Check/Clear All links for dynamic 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 of Check All/ Clear All links for dynamically created check boxes

    Check All   Clear All

Name Email ID  Phone Address
Anita Sudhakar  2452352555  307, Park Avenue
Sean T.P  5223523523  52, Alpine Apts
Priscilla David  5437637676   No.211, Lien Towers
Robbie James  2453465743  22, Oak Street

Cut and Paste Code

Cut 'n' paste code for the above Example

Java-script Code
  • 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.
Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!