Results 1 to 3 of 3

Thread: Checkall functionality using javascript to check all checkboxes

  1. #1
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Checkall functionality using javascript to check all checkboxes

    I have an array of check boxes and I would like to use javascript to check all when I check this one box.How is this possible?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    In about the simplest terms:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function checkall(el){
    	var ip = document.getElementsByTagName('input'), i = ip.length - 1;
    	for (i; i > -1; --i){
    		if(ip[i].type && ip[i].type.toLowerCase() === 'checkbox'){
    			ip[i].checked = el.checked;
    		}
    	}
    }
    </script>
    </head>
    <body>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <label>Check All: <input type="checkbox" value="" onclick="checkall(this);"></label><br>
    </body>
    </html>
    Note: This can be tweaked if need be. Like, if there are other checkboxes on the page and you want to limit it to certain ones:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function checkall(el){
    	var ip = document.getElementById('theboxes').getElementsByTagName('input'), i = ip.length - 1;
    	for (i; i > -1; --i){
    		if(ip[i].type && ip[i].type.toLowerCase() === 'checkbox'){
    			ip[i].checked = el.checked;
    		}
    	}
    }
    </script>
    </head>
    <body>
    <div id="theboxes">Included:<br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <input type="checkbox" value=""><br>
    <label>Check All: <input type="checkbox" value="" onclick="checkall(this);"></label>
    </div>
    <hr>
    Other: <input type="checkbox" value=""><br>
    </body>
    </html>
    There are various ways.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    goldalushington (03-14-2010)

  4. #3
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you I'll try it.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •