javascript - 选择所有复选框，同时跟踪手动选择 jquery

Question

我已经使用一个简单的全选脚本来检查复选框有一段时间了，现在看起来像这样:

<span id="select">Select All</span>

与

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

这相当简单。它附加到 onclick，使用 .checkbox 类循环遍历所有输入，并相应地选中或取消选中它们。不过，我现在想做的是添加以下功能，使其更加用户友好。

1) 当用户单击标有“全选”的链接时，它应该照常选择所有复选框，但随后将文本更改为“取消全选”。同样，当用户单击“取消全选”时，文本将返回到“全选”。

2)如果用户手动选择所有复选框，我想检查这种情况并将文本从“全选”更新为“取消全选”。

Answer 1

您的代码正在检查是否 <span>是 :checked ，据我所知这是不可能的。也许我错了，但在这个答案中，我将使用不同的方法来跟踪它，即数据属性。

// initialize 'checked' property
$('#select').data('checked', false);

// make link control all checkboxes
$('#select').click(function(event) {
  var $that = $(this);
  var isChecked = ! $that.data('checked');
  $that.data('checked', isChecked).html(isChecked ? 'Deselect All' : 'Select All');
  $('.checkbox').prop('checked', isChecked);
});

// make checkboxes update link
$('.checkbox').change(function(event) {
  var numChecked = $('.checkbox:checked').length;
  if (numChecked === 0) {
    $('#select').data('checked', false).html('Select All');
  } else if (numChecked === $('.checkbox').length) {
    $('#select').data('checked', true).html('Deselect All');
  }
});