javascript - jQuery 不取消选中复选框

Question

$('input[type="checkbox"]').change(function() {
  var number = [];
  $('input[type="checkbox"]:checked').each(function() {
    number.push($(this).val());
  });
  if (number.length == 0) {
    $('.category1').prop('checked', true);
    loaddata();
  } else if ($('#all').checked && number.length != 8) {
    alert('it executed');
    $('#all').attr('checked', false);
    loaddata();
  } else {
    loaddata();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="expander-list" id="category">
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" id="all" class="category1">all</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="electronics" class="category1">Electronics</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="kitchen" class="category1">Kitchen</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="decoratives" class="category1">Decoratives / Interior</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="homedecor" class="category1">Home Decor</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="furnitures" class="category1">Furnitures</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="toys" class="category1">Toys</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="vehicles" class="category1">Vehicles</label>
    </div>
  </li>
</ul>

我的担忧很简单。通过单击所有 jQuery 来选择所有复选框，但如果其中一个复选框未选中，则所有复选框都必须取消选中。但它不会取消选中所有复选框，即使是我的 else if 条件未执行并且它不会提醒我。如何解决并提前致谢。

Answer 1

这就是我要做的:

$('input[type="checkbox"]').change(function() {
  var unchecked_flag = false;

  $('input[type="checkbox"]').slice(1).each(function() {
    if ($(this).prop("checked") == false) {
      unchecked_flag = true;
    }
  });

  if (unchecked_flag) {
    $("#all").prop("checked", false);
  } else {
    $("#all").prop("checked", true);
  }
});

$("#all").click(function() {
  $('input[type="checkbox"]').prop("checked", true);
});

Here is the JSFiddle demo