jquery+批量勾选删除

前言

本文将介绍如何使用jQuery实现批量勾选删除功能。该功能允许用户在页面上勾选多个项目，并一次性删除这些项目。我们将通过编写代码来实现此功能，并对代码进行分析和解释。

代码实现

首先，我们需要在页面中引入jQuery库，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来，我们创建一个含有项目列表的HTML表格，并添加一个全选复选框，如下所示：

<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>项目1</td>
      <td><a href="#" class="delete" data-id="1">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check-item" /></td>
      <td>项目2</td>
      <td><a href="#" class="delete" data-id="2">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check-item" /></td>
      <td>项目3</td>
      <td><a href="#" class="delete" data-id="3">删除</a></td>
    </tr>
  </tbody>
</table>

我们给全选复选框和每个项目的复选框绑定事件，以实现全选和单个项目的选择。然后，我们使用删除链接的data-id属性来标识要删除的项目。

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

  // 点击单个项目复选框
  $(".check-item").click(function(){
    if($(".check-item:checked").length == $(".check-item").length) {
      $("#check-all").prop("checked", true);
    } else {
      $("#check-all").prop("checked", false);
    }
  });

  // 点击删除链接
  $(".delete").click(function(){
    var id = $(this).data("id");
    // 在这里执行删除操作，比如发送Ajax请求到后端删除该项目
    // 删除后可以使用以下代码从页面上移除该项目：
    $(this).closest("tr").remove();
  });
});

代码解析

以上代码中，我们使用了jQuery的事件绑定和选择器功能来实现批量勾选删除功能。

首先，我们在文档准备就绪时绑定事件处理函数。点击全选复选框时，我们使用prop()函数将所有项目的复选框的选中状态设置为与全选复选框相同。

点击单个项目复选框时，我们检查已选中的项目数量是否等于所有项目的数量，以确定是否将全选复选框设为选中状态或取消选中状态。

点击删除链接时，我们获取该项目的唯一标识（使用data-id属性存储在链接上），然后执行删除操作。在这个例子中，我们只是从页面上移除该项目的行，而实际的删除操作应该发送请求到后端进行。

总结

通过以上代码和解释，我们可以实现一个具有批量勾选删除功能的页面。这个功能可以提高用户操作的效率，避免了逐个删除项目的麻烦。同时，我们也讲解了jQuery的一些常用函数和用法，希望对你理解和应用jQuery有所帮助。