jQuery实现简单全选框

为了实现一个简单的全选/反选功能，我们可以通过 jQuery 的 on() 方法来监听点击事件，在事件处理函数中操作 DOM 元素来实现相应的功能。

首先，我们需要定义一个按钮或者复选框来作为全选/反选按钮，然后找到所有需要被选中/取消选择的复选框元素。我们可以通过在每个复选框元素上添加一个特殊的类名来实现这个目的，例如，我们可以给所有需要被选中/取消选择的复选框元素添加一个名为“select-all”的类名。

接下来，我们可以使用以下代码来实现全选功能：

$('#select-all-button').on('click', function() {
  $('.select-all').prop('checked', true);
});

这段代码定义了一个点击事件处理函数，当用户点击“全选”按钮时，它将查找所有带有“select-all”类的复选框元素，并将它们的“checked”属性设置为“true”，从而使它们选中。

同样地，我们可以使用以下代码来实现反选功能：

$('#deselect-all-button').on('click', function() {
  $('.select-all').prop('checked', function(i, val) {
    return !val;
  });
});

这段代码也定义了一个点击事件处理函数，当用户点击“反选”按钮时，它会遍历所有带有“select-all”类的复选框元素，并将它们的“checked”属性设置为与原来值相反的值，从而实现反选的效果。

以下是一些示例代码，演示了如何使用上述的 jQuery 代码来实现全选/反选功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery全选框示例</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <input type="checkbox" class="select-all"> 商品1<br>
  <input type="checkbox" class="select-all"> 商品2<br>
  <input type="checkbox" class="select-all"> 商品3<br>
  <input type="checkbox" class="select-all"> 商品4<br>
  <input type="checkbox" class="select-all"> 商品5<br>

  <button id="select-all-button">全选</button>
  <button id="deselect-all-button">反选</button>

  <script>
    $('#select-all-button').on('click', function() {
      $('.select-all').prop('checked', true);
    });

    $('#deselect-all-button').on('click', function() {
      $('.select-all').prop('checked', function(i, val) {
        return !val;
      });
    });
  </script>
</body>
</html>

这个示例代码中包含了一个全选/反选按钮以及一组复选框，用户可以使用这个按钮来全选/反选商品列表中的所有商品。

另一个示例代码中，我们可以使用一个表格来显示商品列表，并通过在表头中添加一个特殊的选择框来实现全选/反选功能。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery全选框示例</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="all-selector"></th>
        <th>商品名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="select-all"></td>
        <td>商品1</td>
        <td>18.00</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select-all"></td>
        <td>商品2</td>
        <td>23.00</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="select-all"></td>
        <td>商品3</td>
        <td>31.50</td>
      </tr>
    </tbody>
  </table>

  <script>
    $('#all-selector').on('change', function() {
      $('.select-all').prop('checked', $(this).prop('checked'));
    });

    $('.select-all').on('change', function() {
      $('#all-selector').prop('checked', $('.select-all:checked').length === $('.select-all').length);
    });
  </script>
</body>
</html>

这个示例代码中，我们在表头中添加了一个选择框，并将其 ID 设置为“all-selector”，同时在每行添加了一个选择框。通过在表头选择框上添加一个 change 事件监听器和一个表格中每个行的选择框的 change 事件监听器，我们可以利用上述的 jQuery 代码来实现全选/反选功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现简单全选框 - Python技术站