title: JQuery Checkboxes Group check
body: <p>All,</p>
  
  <p>I have the following code. How can I fix it so that the category checkbox for each category is checked only if all the items under that are checked?</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  google.load("jquery", "1.3.2");
  google.load("jqueryui", "1.7.2");
  &lt;/script&gt;
  
  &lt;script language="JavaScript"&gt;
   function toggleTableRows()
   {
       $(document).ready(function() {
          $('img.parent')
             .css("cursor","pointer")
             .toggle(
                function() {
                   $(this).attr("title","Click to Collapse")
                   $(this).attr("src","arrow_expanded.gif");
                   $('tr').siblings('#child-'+this.id).toggle();
                },
                function() {
                   $(this).attr("title","Click to Expand");
                   $(this).attr("src","arrow_collapsed.gif");
                   $('tr').siblings('#child-'+this.id).toggle();
                }
            );
  
            initCheckBoxes();
    });
  }
  
  function toggleCheckboxes(current, form, field) {
       $(document).ready(function() {
          $("#"+ form +" :checkbox[name^='"+ field +"[']").attr("checked", current.checked);
       });
  }
  
  function toggleParentCheckboxes(current, form) {        
          var checked = ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length);
          // replace '[anything]' with '' instead of just '[]'
          $("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", checked);
  
  }
  
  function initCheckBoxes(form) {
      $("#"+ form +" :checkbox:checked").each(function() {
                    if (this.name.match(/chk[0-9]\[.*\]/)) {
              toggleParentCheckboxes(this, form);
          }
      });
  }
  &lt;/script&gt;
  &lt;script language="JavaScript"&gt;toggleTableRows();&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action=""&gt;
  &lt;table border=1&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand"&gt;Category - Fruits&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="display: none;" id="child-0"&gt;
      &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Apple&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" value="0" name="chk0[1]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="display: none;" id="child-0"&gt;
      &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Banana&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk0[2]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="display: none;" id="child-0"&gt;
      &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Orange&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk0[5]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;&lt;td&gt;&lt;img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand"&gt;Category - Vegetables&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr style="display: none;" id=child-1&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Cabbage&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk1[21]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr style="display: none;" id=child-1&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Tomatoes&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" value="0" name="chk1[26]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr style="display: none;" id=child-1&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Green Peppers&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk1[29]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>