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中的所有复选框，如果我在父复选框的子框内逐个检查，则应检查parentcheckbox

我点击添加按钮在我的页面中有一个添加按钮如果检查了父类别并且检查了该div的所有孩子我应该获得所有值我怎么能这样做可以帮助我解决任何问题这或可以指导我完成这个

Answer 1

试试这个：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);
    }
});

Answer 2

你可以这样做：

 $('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

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

2 个答案: