Checkboxes within the span, select deselect

Question

I have the following html generated through my PHP code.
What I want to do is that when I select the checkbox in span "row" then the checkboxes for "main_row" span in which "row" is contained in,
should be checked automatically.
Also when I deselect the "main_row" checkbox, then all the contained in "row: checkboxes" should be deselected.
I can use JavaScript or jQuery for this purpose.

<span id="mainTopHeading" >Imports &amp; Exports</span>
<span id="lblmainTopHeading">Categories</span>
<span id="main_row" class="mystyleClass" >
    <input type="checkbox" id="pH" curstomerName="Zubair & CO" recordID="1920"  />
    <span title="Zubair & CO"  id="pHName">Zubair &amp; CO</span>
    <span title="Roland">Roland</span>
</span>
<span id="row"  recordID="1920"  curstomerName="Zubair & CO"   >
    <input type="checkbox"  recordID="1920" curstomerName="Zubair & CO"  />
    <span>Order  Rice &amp; Sugar</span>
    <span>Roland</span>
</span>

<span id="mainTopHeading" >Manufacturing</span>
<span id="lblmainTopHeading">Categories</span>

<span id="main_row" class="mystyleClass" >
    <input type="checkbox" id="pH" curstomerName="Howard Manufacturing" recordID="1870"  />
    <span title="Howard Manufacturing"  id="pHName">Howard Manufacturing</span>
    <span title="Roland"> Roland</span>
</span>
<span id="row" index="1" recordID="1870"  curstomerName="Howard Manufacturing"  >
    <input type="checkbox" style="left:10;" recordID="1870"  curstomerName="Howard Manufacturing" />
    <span>Order Tires and Plastic products</span>
    <span>Roland</span>
</span>
<span id="row" index="1" recordID="1870"  curstomerName="Howard Manufacturing"  >
    <input type="checkbox" style="left:10;" recordID="1870"  curstomerName="Howard Manufacturing" />
    <span>Order Electronics</span>
    <span>Roland</span>
</span>

<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="James & Sons" recordID="1866"  />
    <span title="James & Sons"  id="pHName">James &amp; Sons</span>
    <span title="Roland">Roland</span>
</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Villa Thresa Inc" recordID="1866"  />
    <span title="Villa Thresa Inc"  id="pHName">Villa Thresa Inc</span>
    <span title="Roland">Roland</span>
</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Bangkok Manufacturing" recordID="1866"  />
    <span title="Bangkok Manufacturing"  id="pHName">Bangkok Manufacturing</span>
    <span title="Roland">Roland</span>
</span>

<span id="row"  recordID="1920"  curstomerName="Zubair & CO"   >
    <input type="checkbox"  recordID="1920" curstomerName="Zubair & CO"  />
    <span>Order  Rice &amp; Sugar</span>
    <span>Roland</span>
</span>

<span id="mainTopHeading">Misc.</span>
<span id="lblmainTopHeading">Different things</span>
<span id="main_row" class="mystyleClass"  >
    <input type="checkbox" id="pH" curstomerName="Bangkok Manufacturing" recordID="1866"  />
    <span title="Bangkok Manufacturing"  id="pHName">Bangkok Manufacturing</span>
    <span title="Roland">Roland</span>
</span>​

Answer 1

Once you make the id to class change @patrick suggests above, you can do this:

$(".main_row :checkbox").change(function() {
  $(this).closest(".main_row").nextUntil(".main_row")
         .find(":checkbox").attr("checked", this.checked);
});

You can try a demo here, when you check/uncheck the checkbox in the .main_row, it goes up to the .main_row it's in, uses .nextUntil(".main_row") to get all the <span> elements between the clicked .main_row and the next, so this category. Then it gets any checkboxes in there and sets their checked property to the same as the checkbox in the .main_row you clicked on.

If there may be something besides .row in there, you can add a .filter(".row") after the .nextuntil() to restrict it to .row elements.