全选复选框 jQuery - JavaScript

在 Web 开发中，为了提供更好的用户体验，常常需要使用到复选框来让用户选择或取消选择一组选项。然而，对于一组复选框，如果要实现全选/取消全选的功能，通常需要写大量的 JavaScript 代码。而使用 jQuery 则可以大大减少编码量。

这篇文章将介绍如何使用 jQuery 和 JavaScript 实现一个全选/取消全选的复选框，以及如何扩展它以适用于更多复选框组。

实现全选/取消全选的复选框

HTML

首先，我们需要一个带有“全选”复选框和一组普通复选框的 HTML 元素。例如：

<div>
  <input type="checkbox" id="select-all">
  <label for="select-all">全选</label>
</div>
<div>
  <input type="checkbox" name="option" value="1">
  <label>选项 1</label>
</div>
<div>
  <input type="checkbox" name="option" value="2">
  <label>选项 2</label>
</div>
<div>
  <input type="checkbox" name="option" value="3">
  <label>选项 3</label>
</div>

注意，我们将“全选”复选框放在了一个 <div> 元素内，其它复选框都放在了单独的 <div> 元素内。这是为了方便选择器的编写。

jQuery

接下来，我们可以使用 jQuery 来实现全选/取消全选的功能。代码如下：

$(function() {
  // 点击“全选”复选框时选中所有普通复选框
  $('#select-all').click(function() {
    $('[name=option]').prop('checked', this.checked);
  });
  
  // 点击任意一个普通复选框时，检查是否全部选中或取消全选
  $('[name=option]').click(function() {
    var allChecked = true;
    $('[name=option]').each(function() {
      if (!this.checked) {
        allChecked = false;
        return false;
      }
    });
    $('#select-all').prop('checked', allChecked);
  });
});

这段代码会在页面加载完毕后执行。在这个函数内，我们首先绑定了“全选”复选框的 click 事件。当用户点击时，它会选中所有 name 属性为 option 的普通复选框。

然后，我们又绑定了所有普通复选框的 click 事件。每次点击一个普通复选框，都会检查所有普通复选框是否全部选中或取消选中，然后相应地更新“全选”复选框的状态。

扩展

这样，我们就已经实现了一个全选/取消全选的复选框。但是，如果你有多个复选框组，它们的 HTML 结构各不相同，怎么办？这时，我们可以将上面的 jQuery 代码封装为一个 jQuery 插件，以便在多个复选框组之间共享。代码如下：

$.fn.checkAll = function(options) {
  var defaults = {
    childSelector: '[name=option]'
  };
  var settings = $.extend({}, defaults, options);
  
  return this.each(function() {
    var $this = $(this);
    var $childCheckboxes = $this.find(settings.childSelector);
    
    $this.on('click', function() {
      $childCheckboxes.prop('checked', this.checked);
    });
    
    $childCheckboxes.on('click', function() {
      var allChecked = true;
      $childCheckboxes.each(function() {
        if (!this.checked) {
          allChecked = false;
          return false;
        }
      });
      $this.prop('checked', allChecked);
    });
  });
};

首先，我们定义了一个名为 checkAll 的 jQuery 插件。它接受一个 options 参数，其中包含了子复选框的选择器（默认为 [name=option]）。

然后，我们对每个复选框组都执行一次 checkAll 插件，并传入对应的 options。这样，每个复选框组就都拥有了全选/取消全选的功能。

$(function() {
  $('#select-all-1').checkAll();
  $('#select-all-2').checkAll({
    childSelector: '.my-checkbox'
  });
});

在这个例子中，第一个复选框组的子复选框的选择器默认为 [name=option]，而第二个复选框组的子复选框的选择器为 .my-checkbox。

到此，我们就实现了一个可扩展的全选/取消全选的复选框，并且代码量非常少！