循环通过复选框 jQuery - JavaScript

本文将介绍如何使用 jQuery 和 JavaScript 实现通过复选框循环操作元素的功能。

为什么要循环操作元素？

在 Web 开发中，经常会遇到需要操作多个元素的情况，例如：

• 批量删除表格中选中的行；
• 计算表格中选中的行的和；
• 批量修改表格中选中的行的属性等。

如果需要实现以上功能，就需要通过循环操作元素来实现。

通过复选框选中元素

在实现以上功能之前，我们需要先通过复选框选中需要操作的元素。

HTML 代码如下：

<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Id</th>
      <th>Name</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>1</td>
      <td>John</td>
      <td>2022-01-01</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>2</td>
      <td>Jane</td>
      <td>2022-02-01</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>3</td>
      <td>Tom</td>
      <td>2022-03-01</td>
    </tr>
  </tbody>
</table>

我们在每一行添加了一个复选框，用于选中该行对应的元素。

为了方便操作，我们可以在表头的复选框中添加全选/全不选的功能，HTML 代码如下：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>Id</th>
      <th>Name</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>1</td>
      <td>John</td>
      <td>2022-01-01</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>2</td>
      <td>Jane</td>
      <td>2022-02-01</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>3</td>
      <td>Tom</td>
      <td>2022-03-01</td>
    </tr>
  </tbody>
</table>

通过 JavaScript 代码实现全选/全不选的功能：

$(function(){
  $('#selectAll').click(function(){
    $('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
  });
});

循环操作元素

通过复选框选中需要操作的元素之后，我们可以通过循环遍历选中的元素并执行相应的操作。

遍历选中的元素

通过以下代码获取选中的元素：

$('input[type="checkbox"]:checked')

然后我们可以通过 jQuery 的 each() 方法对选中的元素进行循环操作：

$('input[type="checkbox"]:checked').each(function(){
  // 循环代码
});

在循环代码中，我们可以通过 $(this) 获取当前迭代的元素。

批量删除选中元素

通过以下代码实现批量删除选中的元素：

$('#deleteSelected').click(function(){
  $('input[type="checkbox"]:checked').each(function(){
    $(this).parent().parent().remove();
  });
});

点击删除按钮之后，遍历选中的元素（复选框），然后获取该元素的父元素（行），最后通过 remove() 方法将该元素从 DOM 中删除。

计算选中元素的和

通过以下代码实现计算选中元素的和：

$('#calculate').click(function(){
  var sum = 0;
  $('input[type="checkbox"]:checked').each(function(){
    sum += parseFloat($(this).parent().next().next().text());
  });
  alert(sum);
});

点击计算按钮之后，遍历选中的元素（复选框），然后获取该元素的下一个兄弟元素（第二列），通过 parseFloat() 方法将其转换为数值类型，并将其累加到 sum 中，最后弹出提示框显示计算结果。

批量修改选中元素的属性

通过以下代码实现批量修改选中元素的属性：

$('#changeAttr').click(function(){
  var attr = prompt('Please enter attribute name:');
  var value = prompt('Please enter attribute value:');
  $('input[type="checkbox"]:checked').each(function(){
    $(this).parent().nextAll().attr(attr, value);
  });
});

点击修改按钮之后，弹出提示框要求输入属性名和属性值，然后遍历选中的元素（复选框），然后获取该元素的父元素的下一个兄弟元素（第二列），并将其后面的所有兄弟元素的属性值改为输入的属性值。