jQuery 实现全选、全不选、反选

jQuery 是一款快速、简洁的 JavaScript 库，被广泛应用于网页开发中。在网页开发中，经常会遇到需要批量操作多个复选框的情况，比如全选、全不选和反选。在本文中，我们将使用 jQuery 来实现这些功能。

HTML 结构

首先，我们需要创建一个 HTML 结构来展示复选框和相应的操作按钮。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 实现全选、全不选、反选</title>
  <script src="
  <style>
    table {
      border-collapse: collapse;
      margin-bottom: 10px;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
  jQuery 实现全选、全不选、反选

  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="check-all"></th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="check-item"></td>
        <td>张三</td>
        <td>20</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-item"></td>
        <td>李四</td>
        <td>25</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-item"></td>
        <td>王五</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

  <button id="select-all">全选</button>
  <button id="select-none">全不选</button>
  <button id="select-inverse">反选</button>

  <script src="script.js"></script>
</body>
</html>

在上述代码中，我们创建了一个表格，其中包含了一个全选复选框、多个复选框以及相应的按钮。接下来，我们将用 jQuery 来实现相应的功能。

jQuery 实现全选、全不选、反选

首先，我们需要在页面加载完成后，为按钮和复选框绑定事件。在 script.js 文件中，添加以下代码：

$(document).ready(function() {
  // 全选
  $("#select-all").click(function() {
    $(".check-item").prop("checked", true);
  });

  // 全不选
  $("#select-none").click(function() {
    $(".check-item").prop("checked", false);
  });

  // 反选
  $("#select-inverse").click(function() {
    $(".check-item").each(function() {
      $(this).prop("checked", !$(this).prop("checked"));
    });
  });

  // 全选复选框事件
  $("#check-all").click(function() {
    $(".check-item").prop("checked", $(this).prop("checked"));
  });

  // 复选框改变事件
  $(".check-item").change(function() {
    if ($(".check-item:checked").length === $(".check-item").length) {
      $("#check-all").prop("checked", true);
    } else {
      $("#check-all").prop("checked", false);
    }
  });
});

在以上代码中，我们使用了 jQuery 的 click 方法来绑定按钮的点击事件。当点击 "全选" 按钮时，将所有复选框的 checked 属性设置为 true；当点击 "全不选" 按钮时，将所有复选框的 checked 属性设置为 false；当点击 "反选" 按钮时，遍历所有复选框，将其 checked 属性取反。

此外，我们还使用了 jQuery 的 change 方法来绑定复选框的改变事件。当复选框的状态改变时，判断当前选中的复选框数量是否等于所有复选框的数量，如果相等，则表示所有复选框都被选中，将全选复选框的状态设置为选中；否则，将全选复选框的状态设置为未选中。

测试功能

完成以上代码后，我们可以在浏览器中打开页面，并测试全选、全不选和反选