前端+后端实现全选、反选+批量删除

一、批量删除 <!-- 添加 remove 类名 --> <input type="button" value="批量删除" class="remove">

我们先将批量删除的按钮命名为remove

然后我们写js

// 批量删除 $(".remove").on("click", function () { var ids = []; $(".check_item:checked").each(function () { ids.push($(this).val()); }); // 检查是否有选中的项 if (ids.length === 0) { alert("请至少选择一项"); return; } // 提示用户确认 if (confirm("确定删除选中的项吗？")) { $.ajax({ url: "RemoveServlet", type: "post", data: { ids: ids.join(',') }, success: function (value) { alert(value); loadData(); loadPage(); }, error: function () { alert("批量删除请求失败！"); } }); } });

事件设置：

代码通过 jQuery 给具有 remove 类的元素绑定了一个点击事件。当用户点击“删除”按钮时，事件处理函数将会被触发 $(".remove").on("click", function ()

收集选中的项：

使用 jQuery 查找所有被选中的复选框（即带有 check_item 类且选中状态的复选框）。提取这些复选框的值（通常是对应的 ID），并将其存储在数组 ids 中。 var ids = []; $(".check_item:checked").each(function () { ids.push($(this).val()) })

检查是否选择了项：

如果 ids 数组的长度为 0，表示用户没有选择任何项，弹出提醒框并结束操作。 if (ids.length === 0) { alert("请至少选择一项"); return; }

确认删除操作：

使用 confirm 弹窗提示用户是否确认删除选中的项，用户必须选择“确定”才能继续执行后续操作。

发送 AJAX 请求：

如果用户确认删除，就使用 jQuery 的 $.ajax() 方法向服务器发送 HTTP POST 请求。请求的 URL 是 RemoveServlet，并通过 data 将被选中的项的 ID（以逗号分隔的字符串）发送到服务器。 $.ajax({ url: "RemoveServlet", type: "post", data: { ids: ids.join(',') },

处理响应：

成功回调：如果服务器成功处理删除请求，弹出服务器返回的消息，并调用 loadData() 和 loadPage() 函数重新加载数据和更新分页。 success: function (value) { alert(value) loadData() loadPage() }, 错误回调：如果请求失败，弹出错误提示。 error: function () { alert("批量删除请求失败！") }

接着我们写Servlet

package servelt; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import db.MysqlUtil; @WebServlet("/RemoveServlet") public class RemoveServlet extends HttpServlet { private static final long serialVersionUID = 1L; public RemoveServlet() { super(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); String idString = request.getParameter("ids"); if (idString == null || idString.isEmpty()) { response.getWriter().write("未提供有效的删除 ID 列表"); return; } String[] ids = idString.split(","); StringBuilder sqlBuilder = new StringBuilder("DELETE FROM content WHERE id IN ("); for (int i = 0; i < ids.length; i++) { if (i > 0) { sqlBuilder.append(","); } sqlBuilder.append(ids[i]); } sqlBuilder.append(")"); int num = MysqlUtil.del(sqlBuilder.toString()); String res = (num > 0) ? "删除成功" : "删除失败"; response.getWriter().write(res); } }

 我们只需修改dopose方法

字符编码设置：

request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); 设置请求内容的字符编码为 UTF-8，确保能够正确处理中文等特殊字符。设置响应的内容类型为纯文本，并指定字符编码。

获取请求参数：

String idString = request.getParameter("ids"); 从请求中获取名为 ids 的参数，这个参数应该包含待删除项的 ID，以逗号分隔的字符串形式。

参数有效性检查：

if (idString == null || idString.isEmpty()) { response.getWriter().write("未提供有效的删除 ID 列表") return } 检查 idString 是否为 null 或为空，若是则返回提示信息，防止后续执行无效的删除操作。

构建 SQL 删除语句：

String[] ids = idString.split(",") StringBuilder sqlBuilder = new StringBuilder("DELETE FROM content WHERE id IN (") for (int i = 0; i < ids.length; i++) { if (i > 0) { sqlBuilder.append(",") } sqlBuilder.append(ids[i]) } sqlBuilder.append(")"); 将 idString 按逗号分割成 ID 数组，构建 SQL 删除语句使用 StringBuilder 动态拼接 ID。

执行删除操作：

int num = MysqlUtil.del(sqlBuilder.toString()); 调用 MysqlUtil 中的 del 方法，执行构建的 SQL 删除语句，并返回影响的记录数。

返回结果：

String res = (num > 0) ? "删除成功" : "删除失败"; response.getWriter().write(res); 根据 num 的值判断删除操作是否成功，并将相应的结果返回给客户端。

 二、全选 // 全选 $(".check_all").on("change", function () { // 检查全选框的状态 if ($(this).prop("checked")) { $(".check_item").prop("checked", true) } else { $(".check_item").prop("checked", false) } });

事件绑定：

$(".check_all").on("change", function () 使用 jQuery 为具备 check_all 类的复选框绑定 change 事件。这意味着每当该复选框的状态发生变化时，后续的函数将会被调用。

检查全选框的状态：

if ($(this).prop("checked")) 使用 $(this).prop("checked") 检查当前的全选复选框是否被选中。this 指代的是触发事件的 check_all 复选框对象。使用 prop() 获取某个元素的属性值时，可以直接传入属性名，

也可以通过 prop() 方法设置元素的属性值，例如：

$('#myCheckbox').prop('checked', true); // 将复选框设为选中状态

选择所有项：

$(".check_item").prop("checked", true); 如果全选框被选中（即 checked 为 true），则通过 jQuery 选择所有带有 check_item 类的复选框，并将它们的 checked 属性设置为 true，从而实现全选。

取消选择所有项：

$(".check_item").prop("checked", false); 如果全选框未被选中，则取消所有带有 check_item 类的复选框的选中状态，将它们的 checked 属性设置为 false。 三、反选  //反选 $("tbody").on("click", ".check_item", function () { var allChecked = $(".check_item").length === $(".check_item:checked").length; $(".check_all").prop("checked", allChecked); });

事件委托：

$("tbody").on("click", ".check_item", function () 使用 jQuery 的事件委托方法，在 tbody 元素下监听 check_item 类复选框的点击事件。这种方法允许在动态生成的内容上使用事件处理器，而不需要为每个复选框单独绑定事件。

计算选中的复选框数量：

var allChecked = $(".check_item").length === $(".check_item:checked").length; 这里，通过 $(".check_item").length 获取所有带有 check_item 类的复选框的总数。通过 $(".check_item:checked").length 获取当前选中的 check_item 复选框的数量。这两个数量进行比较，得出 allChecked 变量，表示是否所有复选框都被选中。

更新全选复选框的状态：

$(".check_all").prop("checked", allChecked); 根据 allChecked 的值来设置全选复选框的 checked 属性。如果 allChecked 为 true，则全选复选框被设置为选中；如果为 false，则全选复选框取消选中。

 OK，以上就可以实现了