如何在选中子复选框时检查父级父级和父级

Question

我想让复选框工作，当选择'编辑属性'时，属性，abc，def和ghi也会被选中。当选择任何子abc，def或ghi时，还必须选择编辑属性和属性。当所有子复选框abc，def和ghi未被选中时，编辑属性和属性必须取消选中。 任何人都可以建议不改变HTML代码和使用jQuery。

$(function() {
  $(document).on("change", "li:has(li) > input[type='checkbox']", function() {
    $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  });
  $(document).on("change", "input[type='checkbox'] ~ ul input[type='checkbox']", function() {
    $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
  });
})

ul li {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" class="parent" name="Property" />Property
    <ul>
      <li id="Edit_Property">
        <input type="checkbox" class="child" name="Edit_Property" />Edit_Property
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">abc</li>
        </ul>
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">def</li>
        </ul>
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">ghi</li>
        </ul>
      </li>
      <li id="Remove_Property">
        <input type="checkbox" class="child" name="Remove_Property" />Remove_Property
      </li>
      <li id="Add_Property">
        <input type="checkbox" class="child" name="Add_Property" />Add_Property
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" class="parent" name='Testimonial' />Testimonial
    <ul>
      <li id="Add">
        <input type="checkbox" class="child" name="Add" />Add
      </li>
      <li id="Remove">
        <input type="checkbox" class="child" name="Remove" />Remove
      </li>
      <li id="View">
        <input type="checkbox" class="child" name="View" />View
      </li>
      <li id="Edit">
        <input type="checkbox" class="child" name="Edit" />Edit
      </li>
    </ul>
  </li>
</ul>

Answer 1

您可以将 parent() 方法与 prev() 结合使用，以检查所需的复选框。试试这个：

 $(function() {
   $(document).on("change", "li:has(li) > input[type='checkbox']", function() {
     $(this).parent().parent().prev('input[type="checkbox"]').prop('checked', this.checked);
     $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
   });
   $(document).on("change", "input[type='checkbox'] ~ ul input[type='checkbox']", function() {
     var l_1 = $(this).parent().parent().parent().find('.child').nextAll().find('input:checked').length;
     var l_2 = $(this).parent().parent().find('input:checked').length;
     var c = $(this).closest('ul').find("input[type='checkbox']").is(':checked');
     if (l_1 == 0 && c == false) {
       $(this).parent().parent().parent().parent().prev('input[type="checkbox"]').prop('checked', this.checked);
       $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', c);
     } else if (l_1 > 0 && c == true || l_2 > 0 && c == true) {
       $(this).parent().parent().parent().parent().prev('input[type="checkbox"]').prop('checked', this.checked);
       $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', c);
     }
   });
 })

ul li {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" class="parent" name="Property" />Property
    <ul>
      <li id="Edit_Property">
        <input type="checkbox" class="child" name="Edit_Property" />Edit_Property
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">abc</li>
        </ul>
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">def</li>
        </ul>
        <ul>
          <li>
            <input type="checkbox" id="id_abc" name="abc">ghi</li>
        </ul>
      </li>
      <li id="Remove_Property">
        <input type="checkbox" class="child" name="Remove_Property" />Remove_Property
      </li>
      <li id="Add_Property">
        <input type="checkbox" class="child" name="Add_Property" />Add_Property
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" class="parent" name='Testimonial' />Testimonial
    <ul>
      <li id="Add">
        <input type="checkbox" class="child" name="Add" />Add
      </li>
      <li id="Remove">
        <input type="checkbox" class="child" name="Remove" />Remove
      </li>
      <li id="View">
        <input type="checkbox" class="child" name="View" />View
      </li>
      <li id="Edit">
        <input type="checkbox" class="child" name="Edit" />Edit
      </li>
    </ul>
  </li>
</ul>