JQuery - Group Checkboxes
<p>I have the following code which expands and collapses a subcategory when the arrow image is clicked.</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) {
        $("#"+ 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);
        $("#"+ form +" :checkbox[name='"+ current.name.replace("[]", "") +"']").attr("checked", checked);
}

function initCheckBoxes() {
    $("#frmDinnerMenu :checkbox:checked").each(function() {
        if (this.name.replace(/[0-9]/g, "") == "chk[]") {
                toggleParentCheckboxes(this, "frmDinnerMenu");
        }
    });
}
&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="true" name="chk0[]" 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" value="false" name="chk0[]" 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="true" name="chk0[]" 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[]" 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" checked value="0" name="chk1[]" 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[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;img class="parent" id="2" src="arrow_collapsed.gif" title="Click to Expand"&gt;Category - Dessert&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" name="chk2" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk2');"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr style="display: none;" id=child-2&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Ice Cream&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr style="display: none;" id=child-2&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Custard&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk2[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr style="display: none;" id=child-2&gt;&lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Chocolate Cake&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" checked value="0" name="chk2[]" 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>

<p>Note that when the form is posted, I get the following output</p>

<pre><code>[chk0] =&gt; Array ( 
                  [0] =&gt; true 
                  [1] =&gt; true 
                ) 
.....
.......
</code></pre>

<p>How can I make sure I get the posted values like this:</p>

<pre><code>[chk0] =&gt; Array ( 
                  [0] =&gt; true 
                  [2] =&gt; true 
                )
</code></pre>

<p>The idea is to modify the JavaScript functions and HTML code so the checkbox toggling works and also the POSTED values contain the keys of the checked checkboxes instead of sequential values.</p>

<p>How can I do this?</p>
