javascript - 如果取消选中任何复选框，如何取消选中所有复选框？

Question

我有一个 check all 复选框，一旦它被选中，它会检查所有复选框，反之亦然。

如果取消选中任何复选框，如何取消选中所有复选框，如果选中所有复选框，如何选中选中所有复选框。

<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>