jquery实现批量删除

假设你的 HTML 代码如下：

<table id="items">
  <thead>
    <tr>
      <th>选择</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="ids[]" value="1"></td>
      <td>项目 1</td>
      <td><button class="delete-btn" data-id="1">删除</button></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="ids[]" value="2"></td>
      <td>项目 2</td>
      <td><button class="delete-btn" data-id="2">删除</button></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="ids[]" value="3"></td>
      <td>项目 3</td>
      <td><button class="delete-btn" data-id="3">删除</button></td>
    </tr>
  </tbody>
</table>

<button id="batch-delete-btn">批量删除</button>

你可以使用以下 jQuery 代码来实现批量删除：

$(function() {
  // 单个删除
  $('.delete-btn').click(function() {
    var id = $(this).data('id');
    if (confirm('确定要删除吗？')) {
      // 发送 AJAX 请求删除数据
      $.ajax({
        url: '/path/to/delete',
        type: 'POST',
        data: {id: id},
        success: function() {
          // 删除行
          $('tr[data-id="' + id + '"]').remove();
        },
        error: function() {
          alert('删除失败！');
        }
      });
    }
  });

  // 批量删除
  $('#batch-delete-btn').click(function() {
    var ids = [];
    $('input[name="ids[]"]:checked').each(function() {
      ids.push($(this).val());
    });
    if (ids.length == 0) {
      alert('请选择要删除的项目！');
      return;
    }
    if (confirm('确定要删除所选项目吗？')) {
      // 发送 AJAX 请求删除数据
      $.ajax({
        url: '/path/to/batch/delete',
        type: 'POST',
        data: {ids: ids},
        success: function() {
          // 删除行
          $.each(ids, function(index, id) {
            $('tr[data-id="' + id + '"]').remove();
          });
        },
        error: function() {
          alert('删除失败！');
        }
      });
    }
  });
});

在单个删除中，我们为每个删除按钮添加了一个点击事件，当用户点击该按钮时，会弹出确认对话框，询问用户是否确定要删除。如果用户确认删除，我们会发送一个 AJAX 请求，将该行数据从服务器删除，然后在页面上删除该行。

在批量删除中，我们首先获取所有被选中的复选框的值，然后检查是否至少选中了一个项目。如果没有选中任何项目，我们会弹出警告消息。如果用户确认要删除所选项目，我们会将所有选中项目的 ID 发送到服务器，服务器会将这些项目从数据库中删除，然后在页面上删除这些行。