Check All/Clear All links for dynamic check-boxes

• Dynamic Check-Boxes Tutorial
  • 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

    <script language = "Javascript"> <!-- /** * DHTML check all/clear all links script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/) */ var form='frmSample' //Give the form name here function SetChecked(val,chkName) { dml=document.forms[form]; len = dml.elements.length; var i=0; for( i=0 ; i<len ; i++) { if (dml.elements[i].name==chkName) { dml.elements[i].checked=val; } } } function ValidateForm(dml,chkName){ len = dml.elements.length; var i=0; for( i=0 ; i<len ; i++) { if ((dml.elements[i].name==chkName) && (dml.elements[i].checked==1)) return true } alert("Please select at least one record to be deleted") return false; } // --> </script>

    HTML Code

    <form name="frmSample" method="post" action="#" onSubmit="return ValidateForm(this,'chkSample')"> <div align="left"> <input type='submit' name='' value='Delete Records'>     <a href="javascript:SetChecked(1,'chkSample')"><font face="Arial, Helvetica, sans-serif" size="2">Check All</font></a>   <a href="javascript:SetChecked(0,'chkSample')"><font face="Arial, Helvetica, sans-serif" size="2">Clear All</font></a></div><br><br> <!--your dynamic table contents comes here (change the name chkSample everywhere if you want to) --> <input type="checkbox" name="chkSample" value="A"> A <br> <input type="checkbox" name="chkSample" value="B"> B <br> <input type="checkbox" name="chkSample" value="C"> C <br> </form>

    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.

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!