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>

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

1 个答案: