Jquery UI Checkboxes - Check category only if all subcategories are checked
<p>I have the following code. I need help fixing it such that the "Category" checkbox for each category should be checked only if all the items under that are checked.</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;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;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;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;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;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;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>
