jQuery groupwise“全选”复选框

我需要你的帮助来解决我的一个问题。我有一份带有复选框的产品清单

要求是，如果选中了集团负责人的复选框，则应选中其中的所有复选框。如果在此之后有人取消选择一个，那么它应该从grouphead复选框中删除

这是我的密码

<ul id="productFilter">
<li><input id="pr3" type="checkbox" /><h3>List1</h3>
<ul class="secLevel">
<li><input id="pr3" type="checkbox" /><h3>Product 1</h3>
<ul class="secLevel">
<li><input id="107A-10" type="checkbox" /><label for="107A-10">107A-10</label></li>
<li><input id="107A-11" type="checkbox" /><label for="107A-11">107A-11</label></li>
</ul>
</li>
<li><input id="pr3" type="checkbox" /><h3>Product 2</h3>
<ul class="secLevel">
<li><input id="BFPT" type="checkbox" /><label for="BFPT">BFPT</label></li>
<li><input id="DEV831" type="checkbox" /><label for="DEV831">DEV831</label></li>
</ul>
</li>
</ul>
</li>
<li><input id="pr3" type="checkbox" /><h3>List2</h3>
<ul class="secLevel">
<li><input id="pr3" type="checkbox" /><h3>Product 3</h3>
<ul class="secLevel">
<li><input id="020" type="checkbox" /><label for="020">020</label></li>
<li><input id="025" type="checkbox" /><label for="025">025</label></li>
</ul>
</li>
<li><input id="pr3" type="checkbox" /><h3>Product 4</h3>
<ul class="secLevel">
<li><input id="1A2" type="checkbox" /><label for="1A2">1A2</label></li>
<li><input id="1A4" type="checkbox" /><label for="1A4">1A4</label></li>
</ul>
</li>
</ul>
</li>    
</ul>                

试试这个： 为每个外部复选框赋予值属性

if ($('pr3').attr('checked')) {
 //find the checked value
//based on the value check inner checkboxes
}

---

我已经更改了HTML的结构，您可以更改它，并确保相应地更改jquery选择器

 <ul class="secLevel">
    <li><input id="pr1" type="checkbox" class='mainfilter' /><h3>Product 1</h3>
    <ul class="secLevel" id="pr1Items" >
      <li><input id="107A-10" type="checkbox" /><label for="107A-10">107A-10</label></li>
      <li><input id="107A-11" type="checkbox" /><label for="107A-11">107A-11</label></li>
    </ul>
  </ul>


 <ul class="secLevel">
    <li><input id="pr2" type="checkbox" class='mainfilter' /><h3>Product 1</h3>
    <ul class="secLevel" id="pr1Items" >
      <li><input id="someId1" type="checkbox" /><label for="someId1">107A-10</label></li>
      <li><input id="someId2" type="checkbox" /><label for="someId2">107A-11</label></li>
    </ul>
  </ul>

对于顶层复选框

<input id="parentChkId" type="checkbox"  />



$('#parentChkId').change(function() {
  if($(this).is(':checked')){
     $('#parentChkId input:checkbox').attr('checked','checked');
  }else{
    $('#parentChkId input:checkbox').removeAttr('checked');
  }

---

})

您可以从为输入提供不同的id开始，一个页面上的多个产品不应具有相同的id。脱离主题：您是否知道可以使用包装元素以避免基于id的映射？107A-10->107A-10，前提是该ID未在其他地方使用。是的，我已更改ID。现在我要做的是，我已经改变了你的代码来为我工作，现在工作正常了。谢谢，但我有三个等级。如果你能看到我的HTML有一个家长chk框在那里。请帮助我更改选择器级别，使用$'parentChkId input:checkbox'而不是$this.parent.next'ul'。儿童无法获取它。如果你不介意的话，你能告诉我确切的密码吗

<input id="parentChkId" type="checkbox"  />



$('#parentChkId').change(function() {
  if($(this).is(':checked')){
     $('#parentChkId input:checkbox').attr('checked','checked');
  }else{
    $('#parentChkId input:checkbox').removeAttr('checked');
  }