Question

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

要求是如果选中了组头的复选框，则应选择其中的所有复选框。如果之后有人取消选择一个，那么它应该从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>

Answer 1

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

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

Answer 2

我已经更改了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>

jquery的

$('.mainfilter').change(function() {
  if($(this).is(':checked')){
      $(this).parent().next('ul').children().attr('checked','checked');
  }else{
     $(this).parent().next('ul').children().removeAttr('checked');
  }

});

顶级复选框

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



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

}）;

jQuery groupwise“全选”复选框

2 个答案: