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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    Check/Uncheck all checkboxes with a certain value

    Hello,

    I have a form structure with checkboxes like below, I use this form to manage access rights to certain pages.

    Code:
    <form action="file.php" method="post" name="Permissions">
    
    <table class="list">
    
    <tr>
    <th>Page</th>
    <th>Guests</th>
    <th>Users</th>
    <th>Authors</th>
    <th>Admins</th>
    </tr>
    
    <tr>
    <td>Page 1</td>
    <td><input type="checkbox" name="1[]" value="1" checked></td>
    <td><input type="checkbox" name="1[]" value="10" checked></td>
    <td><input type="checkbox" name="1[]" value="100" checked></td>
    <td><input type="checkbox" name="1[]" value="1000"></td>
    </tr>
    
    <tr>
    <td>Page 2</td>
    <td><input type="checkbox" name="2[]" value="1" checked></td>
    <td><input type="checkbox" name="2[]" value="10" checked></td>
    <td><input type="checkbox" name="2[]" value="100" checked></td>
    <td><input type="checkbox" name="2[]" value="1000"></td>
    </tr>
    
    <tr>
    <td>Page 3</td>
    <td><input type="checkbox" name="3[]" value="1" checked></td>
    <td><input type="checkbox" name="3[]" value="10" checked></td>
    <td><input type="checkbox" name="3[]" value="100" checked></td>
    <td><input type="checkbox" name="3[]" value="1000"></td>
    </tr>
    
    </table>
    
    <input type="submit" name="permissions" value="Send">
    
    </form>
    I need a Javascript function (or two) which I will use with onClick handler. This function should Check/Uncheck all checkboxes that have a certain value.

    Like:

    Code:
    <a href="#" onClick="CheckAllBoxes(1000);">Check All</a>
    <a href="#" onClick="UnCheckAllBoxes(1000);">Check All</a>
    
    should Check/Uncheck all checkboxes with the value 1000.


    Code:
    function CheckAllBoxes(value) {
    
    }
    
    function UnCheckAllBoxes(value) {
    
    }
    Can you help me out of here?
    Last edited by guvenck; 06-06-2007 at 12:09 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.
    Code:
    function toggleAll(val,checkVal) {
    
    	var inputEls = document.getElementsByTagName('input');
    	for (var i = 0, tEl; tEl = inputEls[i]; i++) {
    		if (tEl.type == 'checkbox' && tEl.value == val) {
    			tEl.checked = checkVal;
    		}
    	}
    
    }
    Code:
    <ul>
    	<li><a href="#" onclick="toggleAll(1,'checked');">Check All (1)</a></li>
    	<li><a href="#" onclick="toggleAll(1,'');">Uncheck All (1)</a></li>
    </ul>
    
    …
    
    <td><input type="checkbox" name="1[]" value="1" checked="checked"></td>
    
    …

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    Hi Bill, thanks for the help. Meanwhile I wrote the following and it works too.
    Can this be done with a single toggle-checkbox at the top of the table column like the ones in Yahoo Mail or Hotmail?

    Code:
    function CheckAll(va) {
    	count = document.Permissions.elements.length;
        for (i=0; i < count; i++) {
    		if(document.Permissions.elements[i].value == va) {
    			document.Permissions.elements[i].checked = 1;
    		}
    	}
    }
    function UnCheckAll(va) {
    	count = document.Permissions.elements.length;
        for (i=0; i < count; i++) {
        	if(document.Permissions.elements[i].value == va) {
    			document.Permissions.elements[i].checked = 0;
    		}
    	}
    }

    Code:
    <a href="#" onClick="CheckAll(1);">Check All</a>
    <a href="#" onClick="UnCheckAll(1);">Uncheck All</a>
    Like

    Code:
    <input type="checkbox" onClick="ToggleAll(1)">

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.

    Same js function…
    Code:
    function toggleAll(val,checkVal) {
    
    	var inputEls = document.getElementsByTagName('input');
    	for (var i = 0, tEl; tEl = inputEls[i]; i++) {
    		if (tEl.type == 'checkbox' && tEl.value == val) {
    			tEl.checked = checkVal;
    		}
    	}
    
    }
    Altered event…
    Code:
    <label><input type="checkbox" value="1" checked="checked" onclick="toggleAll(this.value,this.checked);"> 1</label>
    <label><input type="checkbox" value="10" checked="checked" onclick="toggleAll(this.value,this.checked);"> 10</label>
    <label><input type="checkbox" value="100" checked="checked" onclick="toggleAll(this.value,this.checked);"> 100</label>
    <label><input type="checkbox" value="1000" onclick="toggleAll(this.value,this.checked);"> 1000</label>
    The use of checked="checked" above is set to match your default settings for each of your sets. Add or remove the checked="checked" atrributes according to your defaults.


    Overlooking the use of tables for layouts and one or two other issues…

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-GB">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>test</title>
    	<script type="text/javascript">
    
    		function toggleAll(val,checkVal) {
    
    			var inputEls = document.getElementsByTagName('input');
    			for (var i = 0, tEl; tEl = inputEls[i]; i++) {
    				if (tEl.type == 'checkbox' && tEl.value == val) {
    					tEl.checked = checkVal;
    				}
    			}
    
    		}
    
    	</script>
    </head>
    <body>
    
    <form action="file.php" method="post" name="Permissions">
    <div>
    
    <table class="list" border="1" cellpadding="5">
    	<tr>
    		<th>Page</th>
    		<th><input type="checkbox" value="1" onclick="toggleAll(this.value,this.checked);" checked="checked"> Guests</th>
    		<th><input type="checkbox" value="10" onclick="toggleAll(this.value,this.checked);" checked="checked"> Users</th>
    		<th><input type="checkbox" value="100" onclick="toggleAll(this.value,this.checked);" checked="checked"> Authors</th>
    		<th><input type="checkbox" value="1000" onclick="toggleAll(this.value,this.checked);"> Admins</th>
    	</tr>
    	<tr>
    		<td>Page 1</td>
    		<td><input type="checkbox" name="1[]" value="1" checked="checked"></td>
    		<td><input type="checkbox" name="1[]" value="10" checked="checked"></td>
    		<td><input type="checkbox" name="1[]" value="100" checked="checked"></td>
    		<td><input type="checkbox" name="1[]" value="1000"></td>
    	</tr>
    	<tr>
    		<td>Page 2</td>
    		<td><input type="checkbox" name="2[]" value="1" checked="checked"></td>
    		<td><input type="checkbox" name="2[]" value="10" checked="checked"></td>
    		<td><input type="checkbox" name="2[]" value="100" checked="checked"></td>
    		<td><input type="checkbox" name="2[]" value="1000"></td>
    	</tr>
    	<tr>
    		<td>Page 3</td>
    		<td><input type="checkbox" name="3[]" value="1" checked="checked"></td>
    		<td><input type="checkbox" name="3[]" value="10" checked="checked"></td>
    		<td><input type="checkbox" name="3[]" value="100" checked="checked"></td>
    		<td><input type="checkbox" name="3[]" value="1000"></td>
    	</tr>
    </table>
    
    <input type="submit" name="permissions" value="Send">
    
    </div>
    </form>
    
    </body>
    </html>
    Last edited by Bill Posters; 06-06-2007 at 01:31 PM.


  •  

    Posting Permissions

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