Question

我设法检查父复选框以检查所有子复选框，但我不知道如何检查任何子复选框以检查父复选框，如果未选中所有子复选框，则需要取消选中父复选框。 1.我检查了父复选框以检查所有子复选框（已完成） 2.在检查任何子复选框时也会检查父复选框（未完成） 3.如果未选中所有子复选框，则“父”复选框将取消选中（未完成）。这是我有多远：

this.on("state:changed", function(){
     //handle your changed state
});

$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
});

请帮助我解决这个问题，因为我是jquery和js的新手。

Answer 1

您可以使用另一个处理程序来检查是否检查了同一级别中的任何复选框，如果是，请选中父复选框

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li style="display: block;">
    <input type="checkbox">Lead1
    <br>
    <ul>

      <li style="display: block;">
        <input type="checkbox">All Leads
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">Recent Leads
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">My Leads
        <br>
      </li>

    </ul>

  </li>
  <li style="display: block;">
    <input type="checkbox">Lead2
    <br>
    <ul>

      <li style="display: block;">
        <input type="checkbox">first
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">second
        <br>
      </li>

      <li style="display: block;">
        <input type="checkbox">third
        <br>
      </li>

    </ul>

  </li>
</ul>

＆＃13;

Answer 2

将一个类parent添加到父li，然后执行以下操作。

$("input[type='checkbox']").change(function () {
    var ul = $(this).closest('ul');

    var checked = ul.find('input[type="checkbox"]:checked').length > 0;
        
    $(this).closest('.parent').find('input[type="checkbox"]').first().prop('checked', checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent" style="display: block;">
    <input type="checkbox">Lead1 <br>
    <ul>

        <li style="display: block;"><input type="checkbox"> All Leads <br></li>

        <li style="display: block;"><input type="checkbox"> Recent Leads <br></li>

        <li style="display: block;"><input type="checkbox"> My Leads <br></li>

    </ul>

</li>
<li class="parent" style="display: block;">
    <input type="checkbox">Lead2 <br>
    <ul>

        <li style="display: block;"><input type="checkbox"> first <br></li>

        <li style="display: block;"><input type="checkbox"> second <br></li>

        <li style="display: block;"><input type="checkbox"> third <br></li>

    </ul>
</li>

在检查时，子复选框检查父复选框

2 个答案: