javascript - 跨度内的复选框，选择取消选择

Question

我通过我的 PHP 代码生成了以下 html。
我想要做的是，当我选中跨度“行”中的复选框时，然后选中包含“行”的“main_row”跨度的复选框，
应该自动检查。
此外，当我取消选择“main_row”复选框时，应取消选择“row: checkboxes”中包含的所有内容。
为此，我可以使用 JavaScript 或 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至 class改变@patrick 上面的建议，你可以这样做:

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

You can try a demo here , 当您选中/取消选中 .main_row 中的复选框时, 它上升到 .main_row它在里面，使用 .nextUntil(".main_row") 获得所有 <span>单击 .main_row 之间的元素下一个，所以这个类别。然后它在那里获取任何复选框并设置它们的 checked属性与 .main_row 中的复选框相同你点击了。

如果.row之外可能还有什么在那里，您可以添加 .filter(".row") 在 .nextuntil() 之后将其限制为 .row元素。