范围内的复选框，请选择取消选择

Question

我通过我的php代码生成以下html。
我想要做的是，当我选择跨度“行”中的复选框，然后“包含”行中的“main_row”跨度的复选框，
应自动启动。
此外，当我取消选择“main_row”复选框，然后所有包含的行”：复选框都应该被取消
我可以使用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之外可能还有其他内容，您可以在.nextuntil()之后添加.filter(".row")以将其限制为.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); 
});