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
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Check Group of Checkboxes

    Now, I know checking/unchecking a group of checkboxes via a "master" checkbox is easy, but there's some issues beyond my control that make this task difficult for myself.

    Basically i'm doing the web UI for an app thats already written. So i'm just making it look pretty with HTML/CSS, and adding javascript stuff for added functionality.

    The app generates line items each with its own checkbox. The line items are grouped by where they are being shipped, so each shipment line also has a checkbox which I would like to serve as a "master checkbox". When you click this master checkbox every checkbox under the shipment would be checked. The thing is, the name, id, etc has to be exactly the same for every checkbox on the page, which makes this difficult. This is because I really only have two checkboxes to work with in the code, 1 master and 1 line item. When the app is processed through the server it copies the code for each line item over and over and inserts the correct data.

    Is something like this possible without being able to reference the name or id of the checkbox groups? I already have a "select all" button, which selects/deselects all checkboxes on a page. But i'd also like the ability to select all in one group only.

    Thanks!

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Something like this mate?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function checkAll(checkbox, theCommonNodeName) {
    	 theCommonNodeName = theCommonNodeName.toLowerCase();
    	 var theCommonNode = checkbox.parentNode;
    	 while(theCommonNode.nodeName.toLowerCase() != theCommonNodeName && theCommonNode != document) {
    	 	theCommonNode = theCommonNode.parentNode;
    	 }
    	 
    	 if(theCommonNode.nodeName.toLowerCase() != theCommonNodeName) {
    	 	alert("Common parent node could not be found");
    		return;
    	 }
    	 
    	 var inputs = theCommonNode.getElementsByTagName("input");
    	 for(var i=0; inputs[i]; i++) {
    	 	if(inputs[i].type == "checkbox") {
    			inputs[i].checked = checkbox.checked;
    		}
    	 }
    }
    </script>
    <style type="text/css">
    body {
    	font-family: "Courier New", Courier, mono;
    	font-size: 12px;
    	color: #333333;
    }
    
    h1 {
    	color: #000033;
    	font-size: 14px;
    	font-weight: bold;
    }
    
    hr {
    	border: 1px solid black;
    	width: 400px;
    }
    </style>
    </head>
    
    <body>
    <h1>Test 1</h1>
    <form name="frmTest1">
    Check all in this form:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'form');">
    <br><br>
    checkbox1:<input type="checkbox" name="chk1"><br>
    checkbox2:<input type="checkbox" name="chk2"><br>
    checkbox3:<input type="checkbox" name="chk3"><br>
    </form>
    <hr>
    
    <h1>Test 2</h1>
    <form name="frmTest2">
    <table border="1" cellspacing="1" cellpadding="2">
    	<tr><td>Check all in this table:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'table');"></td></tr>
    	<tr><td>checkbox1:<input type="checkbox" name="chk1"></td></tr>
    	<tr><td>checkbox2:<input type="checkbox" name="chk2"></td></tr>
    	<tr><td>checkbox3:<input type="checkbox" name="chk3"></td></tr>
    </table>
    </form>
    <hr>
    
    <h1>Test 3</h1>
    <form name="frmTest3">
    <table border="1" cellspacing="1" cellpadding="2">
    	<tr>
    		<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'tr');"></td>
    		<td>checkbox1:<input type="checkbox" name="chk1"></td>
    		<td>checkbox2:<input type="checkbox" name="chk2"></td>
    		<td>checkbox3:<input type="checkbox" name="chk3"></td>
    	</tr>
    	<tr>
    		<td>Check all in this row:<input type="checkbox" name="chkAll" onclick="checkAll(this, 'tr');"></td>
    		<td>checkbox4:<input type="checkbox" name="chk4"></td>
    		<td>checkbox5:<input type="checkbox" name="chk5"></td>
    		<td>checkbox6:<input type="checkbox" name="chk6"></td>
    	</tr>
    </table>
    </form>
    </body>
    </html>
    The code should be pretty self-explanatory, the onclick you add to your "check all" checkbox should be:
    Code:
    onclick="checkAll(this, 'the common parent html tag for your checkboxes');"
    eg:
    onclick="checkAll(this, 'tr');"
    or:
    onclick="checkAll(this, 'div');"
    or:
    onclick="checkAll(this, 'table');"
    etc etc
    Hope this helps

    m_n
    Last edited by martin_narg; 09-16-2005 at 07:30 PM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yessss that works PERFECT! Thank you so very much.

  • #4
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey how would I use this same type of script, but instead of having the "master" be a checkbox, it would be an image, link, or input that when clicked would show a hidden layer (TD). At that time it would also change the default text or image displayed from "show" to "hide". And of course when you click it again it would hide the TD.

    It needs to use the same sort of way of doing it, as I can't give each hidden TD a specific ID, HOWEVER i CAN give the hidden TD an ID to specify it from all of the other TD tags within. It would just be that there would be multiple TD's with this ID. So basically it needs to say "find the TD in this TABLE with the id of "happy" and show/hide it.

    Any help would be great. I'm able to get it working using the code form above to some extent, but i cant figure out how to tell it to only hide the TD with the specified ID. So its hiding/showing every other TD within.

    THANKS!


  •  

    Posting Permissions

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