在嵌套复选框结构中选中父复选框时如何选中所有复选框？

Question

大家好，我有一个复杂的复选框结构，看起来像这样

<div class="accordian-group">
    <div>
    <input type="checkbox" class="parentcheckbox" value""/>
        <ul>
         <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/>
            <ul>
               <li> <input type="checkbox" value""/></li>
               <li> <input type="checkbox" value""/></li>
              <li> <input type="checkbox" value""/>
                    <ul>
                      <li> <input type="checkbox" value""/></li>
                    </u>
                </li>
           </ul>
       </li>
    </div>
     <div>
    <input type="checkbox" class="parentcheckbox" value""/>
        <ul>
         <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/>
            <ul>
               <li> <input type="checkbox" value""/></li>
               <li> <input type="checkbox" value""/></li>
              <li> <input type="checkbox" value""/>
                    <ul>
                      <li> <input type="checkbox" value""/></li>
                    </u>
                </li>
           </ul>
       </li>
    </div>
</div>

我想要做的是，当父复选框被选中时，应该选中 div 侧的所有复选框，如果我一个一个地选中父复选框的子框内的所有复选框，则应该选中父复选框

如果父类别被选中并且该 div 的所有子项都被选中，我的页面中有一个添加按钮，点击添加按钮，我应该得到所有的值我怎么能这样做任何人都可以帮助我解决这个或者可以指导我完成这个

Answer 1

你可以这样做：

 $('input[type="checkbox"]').change(function(){
  if (!$(this).is(':checked')) return; // do nothing if not checking
  var li = $(this).closest('li');

  // check all children 
  $('li input[type="checkbox"]', li).prop('checked', true);

  // see if all siblings are checked
  var all = true;
  li.siblings().find('>input[type="checkbox"]').each(function(){
    if (!$(this).is(':checked')) all = false;
  });
  if (all) {
    // check parent checkbox
    $(this).closest('ul').closest(':has(>input)')
          .find('input[type="checkbox"]').prop('checked', true);
  }
});

Demonstration

Answer 2

试试这个：Live Demo

// Whenever the parent checkbox is checked/unchecked
$(".parentcheckbox").change(function() {
    // save state of parent
    c = $(this).is(':checked');
    $(this).parent().find("input[type=checkbox]").each(function() {
        // set state of siblings
        $(this).attr('checked', c);
    });
});

// Update parent checkbox based on children
$("input[type=checkbox]:not('.parentcheckbox')").change(function() {
    if ($(this).closest("div").find("input[type=checkbox]:not('.parentcheckbox')").not(':checked').length < 1) {
        $(this).closest("div").find(".parentcheckbox").attr('checked', true);
    } else {
        $(this).closest("div").find(".parentcheckbox").attr('checked', false);
    }
});