如果取消选中任何复选框,如何取消选中selectall复选框？

Question

我检查了所有复选框,检查所有复选框,反之亦然,取消选中.

如果未选中任何复选框,如何取消选中全部选中复选框,如果选中了所有复选框,则选中复选框复选框.

<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Fiddle demo

Answer 1

如果向下方的复选框添加单击处理程序,则可以将复选框的总数与已选中复选框的数量进行比较.试试这个:

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

$('.checkbox').change(function() {
  $('#checkAll').prop('checked', $('.checkbox').length == $('.checkbox:checked').length);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

  <fieldset>
    <legend>Loads of checkboxes</legend>
    <p><label><input type="checkbox" class="checkbox" /> Option 1</label></p>
    <p><label><input type="checkbox" class="checkbox" /> Option 2</label></p>
    <p><label><input type="checkbox" class="checkbox" /> Option 3</label></p>
    <p><label><input type="checkbox" class="checkbox" /> Option 4</label></p>
  </fieldset>
</form>