javascript - 如果未选中任何子复选框，如何取消选中 'select-all' 复选框

Question

我提供了点击 select-all checkbox 的代码，child 复选框被选中/取消选中。现在，如果我取消选择任何子复选框， “全选”复选框应取消选中。我该怎么做？

$(document).ready(function() {
  $('#select-all').click(function(event) {
    var $that = $(this);
    $(':checkbox').each(function() {
      this.checked = $that.is(':checked');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select" style="margin-top:54px; margin-left:10px; margin-right:10px;">
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr class="w3-gray" style="width:100%">
      <th style="padding:20px;"><input id="select-all" class="w3-check w3-left" type="checkbox"><span style="padding:20px;">User name</span></th>
      <th style="padding:15px;">User Id</th>
      <th style="padding:15px;">Designation</th>
      <th style="padding:15px;">Phone No</th>
      <th style="padding:15px;">Address</th>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td style="padding:20px;"><input class="w3-check w3-left" type="checkbox"><span style="padding:20px;">mandeep kumbhar</span></td>
      <td style="padding:20px">employee@123</td>
      <td style="padding:20px">security Incharge</td>
      <td style="padding:20px">123456789</td>
      <td style="padding:20px">awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

Answer 1

要在用户取消选中任何复选框时取消选中全选，请尝试以下代码。

$('.checkbox').click(function(){
   if($(this).prop("checked") == false){
   $('#select-all').prop('checked', false);
   }
}