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

How to unselect selectall checkbox if any of the check box is unselected?

本文关键字：复选框 取消 任何 如果 何取消      更新时间：2023-09-26

>我有一个选中所有复选框，一旦选中它就会选中所有复选框，反之亦然取消选中.

如果未选中任何复选框，如何取消选中全部复选框，

如果选中所有复选框，请选中全部选中复选框。

<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"));
});

小提琴演示

如果将

单击处理程序添加到下面的复选框，则可以将复选框的总数与选中的复选框数进行比较。试试这个：

$("#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>

相关文章：