Flags within range, select picture

Question

I have the following html generated via my PHP code.
 I want to do this when I check the box in the string row, and then the checkboxes for the main_row range that contains the string
 should be checked automatically. Also, when I uncheck the "main_row" checkbox, then all the "row: check" checkboxes should be unchecked.
 For this purpose I can use javascript or jquery.

<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

id to class change @patrick , :

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

, / .main_row, .main_row it in, .nextUntil(".main_row"), <span> .main_row , . checked , .main_row, .

- .row, .filter(".row") .nextuntil(), .row.

Answer 2

, ( ) , .

( . , , .)

, , .main_row, / .row.

: http://jsfiddle.net/nykda/

$(".row input").change(function() {
    var $row= $(this).closest(".row");
    var $main_row = $row.prev('.main_row').length ? $row.prev('.main_row') : $row.prevUntil(".main_row").prev();
    $main_row.find(":checkbox").attr("checked", function(i,attr) {
        return $main_row.nextUntil('.main_row').filter(':has(input:checked)').length ? "checked" : false;
    });
});

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