Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2010
    Location
    Canada
    Posts
    34
    Thanks
    11
    Thanked 4 Times in 4 Posts

    Check all Checkboxes

    Hello, today I am trying to allow a user to easily uncheck/check all checkboxes in a form by checking or unchecking a checkbox.

    The checkboxes would be in a form like so:
    Code:
    <form action="" method="post">
    <input type="checkbox" name="checked[]" value="1">
    <input type="checkbox" name="checked[]" value="2">
    <input type="checkbox" name="checked[]" value="3">
    <input type="checkbox" name="checked[]" value="4">
    </form>
    I use an event handler to call a function:
    Code:
    <input type="checkbox" name="checkall" onchange="checkall('checked[]', this.checked)">
    And here is the function:
    Code:
    function checkall(box_name, current_state) {
    	all = document.getElementsByName(box_name);
    	action = (current_state ==  "checked") ? "false" : "true";
    	for (i = 0; i < all.length; i++) {
    		all[i].checked=action;
    	}
    }
    The event handler should pass the name of the checkboxes and whether the "check all" checkbox is currently checked or not to the checkall() function. Nothing happens when I check/uncheck the "check all" function. Help?

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Try this:

    Code:
    <form action="" method="post">
    	<div id="checkboxContainer">
    		<input type="checkbox" name="blah[]" value="1" />
    		<input type="checkbox" name="blah[]" value="2" />
    		<input type="checkbox" name="blah[]" value="3" />
    		<input type="checkbox" name="blah[]" value="4" />
    	</div>
    </form>
    
    <p>Check all <input type="checkbox" name="checkall" onchange="checkall('checkboxContainer', this.checked);"></p>
    
    <script type="text/javascript">
    	function checkall(containerID, state)
    	{
    		var all = document.getElementById(containerID).getElementsByTagName('input');
    		for (var i=0; i<all.length; i++)
    		{
    			all[i].checked = state;
    		}
    	}
    </script>
    Also, you shouldn't name a checkbox element "checked". This is a reserved word in JS, and could cause problems in your code. I took the liberty of changing it.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,916
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Code:
    <input type="checkbox" name="checkall" onclick="checkall('checked[]', this.checked)">
    (IE doesn't seem to like using onchange for a checkbox)
    Last edited by xelawho; 12-20-2011 at 04:28 AM.


  •  

    Posting Permissions

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