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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HELP! Grouping Checkboxes: Parent Checkbox controlling Child Checkboxes & Vice Versa?

    The title of this thread may seem confusing, but I can't think of a better of describing it. Basically, I need to have groups of checkboxes controlled by a parent checkbox. If I click the parent checkbox, the child checkboxes automatically check. Conversely, if I uncheck the partent checkbox, the child checkboxes uncheck. Finally, the parent checkbox should automatically uncheck if all child checkboxes are not checked. Please see the animation below.

    Breakdown:
    1) Checking parent checkbox checks all child checkboxes
    2) Unchecking parent checkbox unchecks all child checkboxes
    3) Parent checkbox should only be checked if all child checkboxes are checked

    I'm fairly new to javascript and lack the skills currently to program such functionality. How would I go about programming this type of functionality? Thanks in advance for your help!!!

    Last edited by FastCougar; 06-17-2004 at 08:04 PM. Reason: Clarification & Edited Animation

  • #2
    New Coder
    Join Date
    May 2004
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm new to JS myself, but i like to read these boards cuz i learn alot. That being said, I took a stab at solving your problem because it seemed relatively straightforward.

    Like i said, I don't know much about JS. But I do know that there is a far better way to do this than my gross mess of if/then's. However, this works (in IE at least)... and now im gonna go see if I can do it cleaner as further practice.

    Code:
    <html>
    <head>
    <script language="Jscript">
    function checkChecks(el) {
    	var shortcut = document.box
    	if (el.name == "master0") {
    		if (el.checked) {
    			shortcut.slave00.checked = true
    			shortcut.slave01.checked = true
    			shortcut.slave02.checked = true
    		}			
    		if (!el.checked) {
    			shortcut.slave00.checked = false
    			shortcut.slave01.checked = false
    			shortcut.slave02.checked = false
    		}	
    	}
    	if (shortcut.slave00.checked == false || shortcut.slave01.checked == false || shortcut.slave02.checked == false) {
    		document.box.master0.checked = false
    	} else {
    		shortcut.master0.checked = true
    	}
    	if (el.name == "master1") {
    		if (el.checked) {
    			shortcut.slave10.checked = true
    			shortcut.slave11.checked = true
    			shortcut.slave12.checked = true
    		}			
    		if (!el.checked) {
    			shortcut.slave10.checked = false
    			shortcut.slave11.checked = false
    			shortcut.slave12.checked = false
    		}	
    	}
    	if (shortcut.slave10.checked == false || shortcut.slave11.checked == false || shortcut.slave12.checked == false) {
    		document.box.master1.checked = false
    	} else {
    		shortcut.master1.checked = true
    	}
    }
    </script>
    </head>
    <body>
    <form name="box" method="" action="">
      <p><input type="checkbox" name="master0" value="ON" onclick="checkChecks(this)">master<br>
      	<input type="checkbox" name="slave00" value="ON" onclick="checkChecks(this)">slave0<br>
     	<input type="checkbox" name="slave01" value="ON" onclick="checkChecks(this)">slave1<br>
     	<input type="checkbox" name="slave02" value="ON" onclick="checkChecks(this)">slave2<br></p>
      
        <p><input type="checkbox" name="master1" value="ON" onclick="checkChecks(this)">master<br>
      	<input type="checkbox" name="slave10" value="ON" onclick="checkChecks(this)">slave0<br>
     	<input type="checkbox" name="slave11" value="ON" onclick="checkChecks(this)">slave1<br>
     	<input type="checkbox" name="slave12" value="ON" onclick="checkChecks(this)">slave2<br></p>
    </form>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works great in IE/Opera, but I need a true cross browser solution. Time for me to start digging into why this will not work in Mozilla/Firefox. Anyone else have any suggestions/code that might be helpfull?

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found a cross-browser solution on the web after much searching. It involves using a library and then calling it with a new function call. Pretty straight forward formatting. However, this is one catch. I need all my "grouped" values, regardless of which group they are in, to have the same name! This causes a problem with this solution since the name is passed to the library as an attribute. To see what I am talking about here, you will need to download this js source file and then link in in the test page (view code below). Can someone please take a look at the code and tell me if it's even possible to do what I want done? Below are my requirements:

    1) All check boxes MUST have the same name attribute.
    2) Selecting parent "group" will check all child "grouped" checkboxes.
    3) Conversely, Deselecting will uncheck all the boxes FOR THAT GROUP ONLY.
    4) If all child "grouped" checkboxes are checked, the parent "group" will be checked.


    JS Source File: http://www.mattkruse.com/javascript/...up/source.html

    Testing Code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <SCRIPT LANGUAGE="JavaScript" SRC="source/CheckBoxGroup.js"></script>
    </head>
    
    <body>
    <form name="frmPermissions">
    <table>
    	<tr>
    		<td colspan="3">Permissions:</td>
    	</tr>
    	<SCRIPT LANGUAGE="JavaScript">
    		var userSettingsGroup = new CheckBoxGroup();
    		userSettingsGroup.addToGroup("permissionID1");
    		userSettingsGroup.setControlBox("AllUser");
    		userSettingsGroup.setMasterBehavior("all");
    	</SCRIPT>
    	<tr>
    		<td><input type="checkbox" name="AllUser" onClick="userSettingsGroup.check(this)"></td>
    		<td colspan="2">User Settings</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td><input type="checkbox" name="permissionID" value="1" onClick="userSettingsGroup.check(this)"></td>
    		<td>Change Password</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td><input type="checkbox" name="permissionID" value="2" onClick="userSettingsGroup.check(this)"></td>
    		<td>Change Email Address</td>
    	</tr>
    	<SCRIPT LANGUAGE="JavaScript">
    		var inventoryModuleGroup = new CheckBoxGroup();
    		inventoryModuleGroup.addToGroup("permissionID2");
    		inventoryModuleGroup.setControlBox("AllInventory");
    		inventoryModuleGroup.setMasterBehavior("all");
    	</SCRIPT>
    	<tr>
    		<td><input type="checkbox" name="AllInventory" onClick="inventoryModuleGroup.check(this)"></td>
    		<td colspan="2">Inventory Module</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td><input type="checkbox" name="permissionID" value="3" onClick="inventoryModuleGroup.check(this)"></td>
    		<td>Inquiry</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td><input type="checkbox" name="permissionID" value="4" onClick="inventoryModuleGroup.check(this)"></td>
    		<td>Orders</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td><input type="checkbox" name="permissionID" value="5" onClick="inventoryModuleGroup.check(this)"></td>
    		<td>Receivings</td>
    	</tr>
    </table>
    </form>
    
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I spent a few hours working on this thing (in between other assignments at work and lunch... ) and so even though you've found your solution, I'm posting this one anyway!!

    It only seems to work in IE though... but it seems to work well in IE!

    If anyone knows how to change it to work in other browsers, I think it's a neat script. (Not sure how many people care about my opinion..)

    Sadiq.
    Attached Files Attached Files

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by FastCougar
    Breakdown:
    1) Checking parent checkbox checks all child checkboxes
    2) Unchecking parent checkbox unchecks all child checkboxes
    3) Parent checkbox should only be checked if all child checkboxes are checked
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function ckSum(ckb)
     {
       var pNode = ckb.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckb.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked;
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
        }
       function backLash()
        {
          var master = pNode.parentNode.parentNode.getElementsByTagName("INPUT")[0];
          master.checked = false;
        }
       function countLashings()
        {
          var  boxes = pNode.parentNode.parentNode.getElementsByTagName("INPUT"), 
                   i = 1,
              master = boxes[0];
          for(; i < boxes.length; i++)
            if(!boxes[i].checked)
              break; 
          if(i == boxes.length)
            master.checked = true;
        }
    }
    </script>
    
    <style type="text/css">
    .ckList
     {
       list-style-type:none;
     }
    </style>
    </head>
    <body>
    <form>
    <ul class="ckList">
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
        <ul class="ckList">
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
        </ul>
      </li>
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
         <ul class="ckList">
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
         </ul>
      </li>
    </ul>
    </form>
    </body>
    </html>
    Ok, I've refined the code 5-times, now ... get the latest, above.
    Last edited by neofibril; 06-18-2004 at 10:19 AM. Reason: 5th refinement.

  • #7
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tangent...

    This is just for reference.

    I experimented with an expando attribute to handle the state-accounting, instead of using the for() statement.
    The extra code required for this will outweigh any efficiency gain, unless there are hundreds of checkboxes, I suspect.
    So then, here's how it took shape:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function ckSum(ckBx)
     {
       var pNode = ckBx.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckBx.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked, 
                ckd = pNode.getElementsByTagName("UL")[0].attributes["checkedcount"];
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
          bool ? ckd.nodeValue = boxes.length - 1 : ckd.nodeValue = 0;
        }
       function backLash()
        {
          pNode = pNode.parentNode; 
          pNode.parentNode.getElementsByTagName("INPUT")[0].checked = false;
          var counter = +pNode.getAttribute("checkedcount") - 1;
          pNode.attributes["checkedcount"].nodeValue = counter;
        }
       function countLashings()
        {
          pNode = pNode.parentNode;
          var counter = +pNode.getAttribute("checkedcount") + 1,
                boxes = pNode.parentNode.getElementsByTagName("INPUT");
          if(counter == boxes.length - 1)
            boxes[0].checked = true;
          pNode.attributes["checkedcount"].nodeValue = counter;
        }
    }
    </script>
    <style type="text/css">
    .ckList
     {
       list-style-type:none;
     }
    </style>
    </head>
    <body>
    <form>
    <ul class="ckList">
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
        <ul class="ckList" checkedcount="0">
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
        </ul>
      </li>
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
         <ul class="ckList" checkedcount="2">
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" checked onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" checked onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
         </ul>
      </li>
      <li master><input type="checkbox" checked onclick="ckSum(this)"><label>Master</label>
         <ul class="ckList" checkedcount="3">
           <li><input type="checkbox" checked onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" checked onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" checked onclick="ckSum(this)"><label>slave</label></li>
         </ul>
      </li>
    </ul>
    </form>
    </body>
    </html>
    ...and that can be consolidated a bit:
    Code:
    <script type="text/javascript">
    function ckSum(ckBx)
     {
       var pNode = ckBx.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       pNode = pNode.parentNode;
       var counter = +pNode.getAttribute("checkedcount"),
             boxes = pNode.parentNode.getElementsByTagName("INPUT");
       if(ckBx.checked)
        {
          counter = counter + 1;
          if(counter == boxes.length - 1)
            boxes[0].checked = true;
        }
       else
        {
          boxes[0].checked = false;
          counter = counter - 1;
        }
       pNode.attributes["checkedcount"].nodeValue = counter;
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1,
               bool = boxes[0].checked,
                ckd = pNode.getElementsByTagName("UL")[0].attributes["checkedcount"];
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
          bool ? ckd.nodeValue = boxes.length - 1 : ckd.nodeValue = 0;
        }
    }
    </script>
    Last edited by neofibril; 06-18-2004 at 05:42 PM.

  • #8
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great work! Thanks!!! Any way this could be done without using lists?

    Just when you think that you got it figured out, along I come and change the assignment



    Quote Originally Posted by neofibril
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function ckSum(ckb)
     {
       var pNode = ckb.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckb.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked;
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
        }
       function backLash()
        {
          var master = pNode.parentNode.parentNode.getElementsByTagName("INPUT")[0];
          master.checked = false;
        }
       function countLashings()
        {
          var  boxes = pNode.parentNode.parentNode.getElementsByTagName("INPUT"), 
                   i = 1,
              master = boxes[0];
          for(; i < boxes.length; i++)
            if(!boxes[i].checked)
              break; 
          if(i == boxes.length)
            master.checked = true;
        }
    }
    </script>
    
    <style type="text/css">
    .ckList
     {
       list-style-type:none;
     }
    </style>
    </head>
    <body>
    <form>
    <ul class="ckList">
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
        <ul class="ckList">
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
          <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
        </ul>
      </li>
      <li master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
         <ul class="ckList">
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
           <li><input type="checkbox" onclick="ckSum(this)"><label>slave</label></li>
         </ul>
      </li>
    </ul>
    </form>
    </body>
    </html>
    Ok, I've refined the code 5-times, now ... get the latest, above.

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sad69
    I spent a few hours working on this thing (in between other assignments at work and lunch... ) and so even though you've found your solution, I'm posting this one anyway!!

    It only seems to work in IE though... but it seems to work well in IE!

    If anyone knows how to change it to work in other browsers, I think it's a neat script. (Not sure how many people care about my opinion..)

    Sadiq.
    Thanks for working on this! However, I haven't found a solution. The library I linked to above doesn't support using the same name attribute in the checkbox input, which is my #1 requirement. I am using the string of returned values of checkbox (1,5,7,19) to populate a database. So, I MUST use the same checkbox name with different values.

  • #10
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I suppose.

    Quote Originally Posted by FastCougar
    Any way this could be done without using lists?
    Is there a good reason not to use a list structure?
    It seems to be ideal for this.

  • #11
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, regardless, just keep the relative parentNodes intact, and nothing need be changed.
    Here's the same thing with divs:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function ckSum(ckb)
     {
       var pNode = ckb.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckb.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked;
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
        }
       function backLash()
        {
          var master = pNode.parentNode.parentNode.getElementsByTagName("INPUT")[0];
          master.checked = false;
        }
       function countLashings()
        {
          var  boxes = pNode.parentNode.parentNode.getElementsByTagName("INPUT"), 
                   i = 1,
              master = boxes[0];
          for(; i < boxes.length; i++)
            if(!boxes[i].checked)
              break; 
          if(i == boxes.length)
            master.checked = true;
        }
    }
    </script>
    </head>
    <body>
    <form>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
      </div>
    </div>
    <br>
    <br>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
        <div><input type="checkbox" onclick="ckSum(this)"><label>slave</label></div>
      </div>
    </div>
    </form>
    </body>
    </html>

  • #12
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by neofibril
    Is there a good reason not to use a list structure?
    It seems to be ideal for this.
    Not really ... just easier to display the exact way I want. Lists hard code the indention spacing and impose unwanted line breaks. Using DIV instead works good, but they are followed by a line break. To ensure no formatting other than what I express, I simply converted all the DIV's to SPAN's and it works just fine.

    I can't thank you enough! This works great in all the browsers I have tested in (Mozilla 1.7b/FireFox 0.8/Netscape 7.1/IE 6.0/Opera 7.5).

    Quick Question: What version of Javascript is required to be supported to use this? I don't have the means to test this backwards.

  • #13
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd guess its a matter of browser support for DOM Level 1.

  • #14
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by FastCougar
    To ensure no formatting other than what I express, I simply converted all the DIV's to SPAN's and it works just fine.
    Alright, I took out one of the parentNode references, so you won't need to use so many unnecessary elements.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function ckSum(ckb)
     {
       var pNode = ckb.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckb.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked;
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
        }
       function backLash()
        {
          var master = pNode.parentNode.getElementsByTagName("INPUT")[0];
          master.checked = false;
        }
       function countLashings()
        {
          var  boxes = pNode.parentNode.getElementsByTagName("INPUT"), 
                   i = 1,
              master = boxes[0];
          for(; i < boxes.length; i++)
            if(!boxes[i].checked)
              break; 
          if(i == boxes.length)
            master.checked = true;
        }
    }
    </script>
    </head>
    
    <body>
    <form>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <span>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
      <span>
    </div>
    <br>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <span>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
      <span>
    </div>
    </form>
    </body>
    </html>
    Last edited by neofibril; 06-18-2004 at 07:06 PM.

  • #15
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by neofibril
    Alright, I took out one of the parentNode references, so you won't need to use so many unnecessary elements.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function ckSum(ckb)
     {
       var pNode = ckb.parentNode;
       if(pNode.getAttributeNode("master"))
         return whipAll();
       !ckb.checked ? backLash() : countLashings();
       function whipAll()
        {
          var boxes = pNode.getElementsByTagName("INPUT"), 
                  i = 1, 
               bool = boxes[0].checked;
          for(; i < boxes.length; i++)
            boxes[i].checked = bool;
        }
       function backLash()
        {
          var master = pNode.parentNode.getElementsByTagName("INPUT")[0];
          master.checked = false;
        }
       function countLashings()
        {
          var  boxes = pNode.parentNode.getElementsByTagName("INPUT"), 
                   i = 1,
              master = boxes[0];
          for(; i < boxes.length; i++)
            if(!boxes[i].checked)
              break; 
          if(i == boxes.length)
            master.checked = true;
        }
    }
    </script>
    </head>
    
    <body>
    <form>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <span>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
      <span>
    </div>
    <br>
    <div master><input type="checkbox" onclick="ckSum(this)"><label>Master</label>
      <span>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
        <input type="checkbox" onclick="ckSum(this)"><label>slave</label>
      <span>
    </div>
    </form>
    </body>
    </html>
    Actually, I reverted back to your original listing structure since I can't get this to work when the span's are seperated with structural eliments like tables and table rows and table data cells.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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