如果任何子复选框被取消选择，我该如何取消“全选”复选框的选中状态？

Question

我已经提供了代码，点击select-all复选框时，子复选框会被选中/取消选中。现在如果我取消选择任何一个子复选框，'select-all'复选框应该也被取消选择。我该如何做？

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

- mandy

---

请添加您的HTML代码。 - Pedram

请查看以下链接：https://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery - Athul Nath

Answer 1

如果用户取消任何复选框，则尝试以下代码以取消全选。

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

- SRK

Answer 2

你可以为子复选框指定类，并检查已选和未选条件。

$('#checkall').on('change', function() {
  $('.test:checkbox').prop('checked', $(this).is(":checked"));
});
$('.test').on('change', function() {
  if (!$(this).is(':checked')) {
    $('.test').prop('checked', false);
    $('#checkall').prop('checked', false);
  }
  if ($('.test:checked').length === 1) {
    $('.test').prop('checked', false);
    $('#checkall').prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />Check all
<input type="checkbox" class="test" />1
<input type="checkbox" class="test" />2
<input type="checkbox" class="test" />3
<input type="checkbox" class="test" />4

- 4b0

Answer 3

在子复选框更改时执行您的操作。

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

- Bhuvan Arora

Answer 4

我建议采用以下方法，它允许 #select-all 元素选中所有“子”复选框，并允许这些子复选框选中或取消选中 #select-all。

// caching the <table> element:
var tableElement = $('table');

// binding the anonymous function of the on() method to the
// 'change' event that takes place on <input> elements of
// type=checkbox:
tableElement.on('change', 'input[type=checkbox]', function(event) {

  // caching the changed element:
  var changed = event.target,

  // caching:
    checkboxes = tableElement

    // <input> elements within the <table>
    // of type=checkbox:
    .find('input[type=checkbox]')

    // which do not match the '#select-all'
    // selector:
    .not('#select-all');

  // if the changed element has the id of 'select-all':
  if (changed.id === 'select-all') {

    // we update the 'checked' property of the cached
    // check-box inputs to reflect the checked state
    // of the '#select-all' element:
    checkboxes.prop('checked', changed.checked);
  } else {

    // here we check that the number of checked checkboxes
    // is equal to the number of check-boxes (effectively
    // finding out whether all, or not-all, check-boxes are
    // checked:
    var allChecked = checkboxes.length === checkboxes.filter(':checked').length

    // here we update the 'checked' property of the
    // '#select-all' check-box to true (if the
    // number of checked check-boxes is equal to the
    // number of check-boxes) or false (if the number
    // of checked check-boxes is not equal to the
    // number of check-boxes):
    $('#select-all').prop(
      'checked', allChecked
    );

  }
});

var tableElement = $('table');
tableElement.on('change', 'input[type=checkbox]', function(event) {
  var changed = event.target,
    checkboxes = tableElement
    .find('input[type=checkbox]')
    .not('#select-all');

  if (changed.id === 'select-all') {
    checkboxes.prop('checked', changed.checked)
  } else {
    var allChecked = checkboxes.length === checkboxes.filter(':checked').length

    $('#select-all').prop(
      'checked', allChecked
    );

  }
});

<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>
        <input id="select-all" class="w3-check w3-left" type="checkbox">
        <span>User name</span></th>
      <th>User Id</th>
      <th>Designation</th>
      <th>Phone No</th>
      <th>Address</th>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

JS Fiddle演示。

然而，如果您更喜欢使用纯JavaScript完成此操作：

// a named, rather than anonymous, function to handle
// the functionality, passing in the event Object:
function checkToggle(event) {

  // caching the changed element:
  var changed = event.target,

    // caching the element with the id of 'select-all':
    selectAll = document.getElementById('select-all'),

    // caching all <input> elements of type=checkbox,
    // using Function.prototype.call() to apply
    // Array.prototype.slice() to the HTMLCollection
    // returned by document.querySelectorAll(), in order
    // to convert the Array-like HTMLCollection into an
    // Array:
    checkboxes = Array.prototype.slice.call(
      this.querySelectorAll('input[type=checkbox]')

    // filtering the Array of <input> elements:
    ).filter(function(check) {

    // retaining only those <input> elements which are
    // not the selectAll element:
      return check !== selectAll;
    });

  // if the changed element is the selectAll element:
  if (changed === selectAll) {

    // we iterate over the Array of checkboxes using
    // Array.prototype.forEach():
    checkboxes.forEach(function(check) {

      // 'check' is a reference to the current
      // check-box in the Array of check-boxes;
      // and here we update the checked property
      // of each <input> to reflect the state of
      // the selectAll <input>:
      check.checked = selectAll.checked;
    });
  } else {

    // filtering the array of checkboxes to retain only
    // those that are checked:
    var allChecked = checkboxes.filter(function(check) {
      return check.checked;

    // retrieving the length of the filtered Array and
    // comparing that length to the length of the Array
    // check-boxes in total:
    }).length === checkboxes.length;

    // updating the 'checked' property of the selectAll
    // element to true (if all 'child' checkboxes are
    // checked) or false (if not all 'child' checkboxes
    // are checked):
    selectAll.checked = allChecked;
  }

}

var tableElement = document.querySelector('table');

tableElement.addEventListener('change', checkToggle);

function checkToggle(event) {
  var changed = event.target,
    selectAll = document.getElementById('select-all'),
    checkboxes = Array.prototype.slice.call(
      this.querySelectorAll('input[type=checkbox]')
    ).filter(function(check) {
      return check !== selectAll;
    });

  if (changed === selectAll) {
    checkboxes.forEach(function(check) {
      check.checked = selectAll.checked;
    });
  } else {
    var allChecked = checkboxes.filter(function(check) {
      return check.checked;
    }).length === checkboxes.length;

    selectAll.checked = allChecked;
  }

}

var tableElement = document.querySelector('table');

tableElement.addEventListener('change', checkToggle);

<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>
        <input id="select-all" class="w3-check w3-left" type="checkbox">
        <span>User name</span></th>
      <th>User Id</th>
      <th>Designation</th>
      <th>Phone No</th>
      <th>Address</th>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>18/522,Neelkanth CHS,Nehru Nagar,Kurla East,Mumbai-400024</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
    <tr>
      <td>
        <input class="w3-check w3-left" type="checkbox">
        <span>mandeep kumbhar</span></td>
      <td>employee@123</td>
      <td>security Incharge</td>
      <td>123456789</td>
      <td>awtry lbduyvetyd jhvdytf ihuusb</td>
    </tr>
  </table>
</div>

JS Fiddle演示。

参考资料：

• JavaScript:
  • Array.prototype.filter()过滤数组中的元素。
  • Array.prototype.forEach()对数组中的每个元素执行给定的函数。
  • Array.prototype.slice()返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
  • document.getElementById()返回对拥有指定 ID 的第一个对象的引用。
  • document.querySelectorAll()返回文档中匹配指定 CSS 选择器的所有元素。
  • Event 对象代表事件的状态，比如事件发生在哪个元素上，鼠标的位置和按下的键。
  • EventTarget.addEventListener()将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
  • Function.prototype.call()调用一个函数，其具有一个指定的 this 值和分别地提供的参数（参数的列表）。
• jQuery:
  • filter()减少匹配元素的集合来匹配指定选择器。
  • find()获取当前匹配元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
  • not()从匹配元素集合中删除与指定选择器匹配的元素。
  • on()在被选元素及其子元素上添加一个或多个事件处理程序。
  • prop()获取第一个匹配元素的属性值。

- David Thomas