jQuery分组“全选”复选框

问题描述

| 我需要您的帮助来解决我的问题之一。我有一个带有复选框的产品列表。 要求是，如果选中组头的复选框，则应选中其中的所有复选框。如果此后有人取消选择，则应将其从组头复选框中删除。 这是我的代码

<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>

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\');
  }

}）;