Java | 全选 取消全选 反选 批量删除 jsp+servlet实现

思路：前端使用js(jQuery)遍历checkbox的checked值，将选中(checked)的checkbox对应的value值（对应数据的主键）存放在数组中，将数组转发到servlet
遍历传来的数组，调用方法删除数据。

效果

前端

<table class="table table-hover">
    <tr align="center">
        <td>请选择</td>
        <td>ID</td>
        <td>图书编号</td>
        <td>图书名称</td>
        <td>图书类型</td>
        <td>图书作者</td>
        <td>出版社</td>
        <td>出版日期</td>
        <td>是否借阅</td>
        <td>创建人</td>
        <td>创建日期</td>
        <td>最新更新时间</td>
        <td>借阅用户ID</td>
        <td colspan="2">操作</td>
    </tr>
    <c:forEach var="item" items="${bookInfos}">
        <tr align="center">
            <td><input id="check" type="checkbox" value="${item.book_id}"></td>
            <td>${item.book_id}</td>
            <td>${item.book_code}</td>
            <td>${item.book_name}</td>
            <td><c:choose>
                <c:when test="${item.book_type==1}">小说</c:when>
                <c:when test="${item.book_type==2}">文学</c:when>
                <c:when test="${item.book_type==3}">传记</c:when>
                <c:when test="${item.book_type==5}">艺术</c:when>
                <c:when test="${item.book_type==6}">少儿</c:when>
                <c:when test="${item.book_type==7}">经济</c:when>
                <c:when test="${item.book_type==8}">管理</c:when>
                <c:when test="${item.book_type==8}">科技</c:when>
            </c:choose>
            </td>
            <td>${item.book_author}</td>
            <td>${item.publish_press}</td>
            <td>${item.publish_date}</td>
            <td>
                <c:choose>
                    <c:when test="${item.is_borrow==1}">已借</c:when>
                    <c:when test="${item.is_borrow==0}">未借</c:when>
                </c:choose>
            </td>
            <td>${item.createdBy}</td>
            <td>${item.creation_time}</td>
            <td>${item.last_updatetime}</td>
            <td>${item.user_id}</td>
            <td><a href="${pageContext.request.contextPath}/bookInfoListById?id=${item.book_id}">修改</a></td>
            <td><a onclick="confirm('确定要删除么?')"
                   href="${pageContext.request.contextPath}/deleteBookInfoById?id=${item.book_id}">删除</a></td>
        </tr>
    </c:forEach>
</table>
<input type="button" onclick="checkAll()" value="全选">
<input type="button" onclick="removeAll()" value="取消">
<input type="button" onclick="invert()" value="反选">
<input type="button" onclick="deleteAll()" value="批量删除">

js

// 全选
function checkAll() {
    var checkList = $("input[id='check']");
    for (let i = 0; i < checkList.length; i++) {
        checkList[i].checked = true;
    }
}

// 取消
function removeAll() {
    var checkList = $("input[id='check']");
    for (let i = 0; i < checkList.length; i++) {
        checkList[i].checked = false;
    }
}

// 反选
function invert() {
    var checkList = $("input[id='check']");
    for (let i = 0; i < checkList.length; i++) {
        checkList[i].checked = !checkList[i].checked;
    }
}

// 批量删除
function deleteAll() {
    if (confirm("确定要删除么？")) {
        const checkId = [];
        const checkList = $("input[id='check']:checked");
        for (let i = 0; i < checkList.length; i++) {
            checkId[i] = checkList[i].value;
        }
        for (let i = 0; i < checkId.length; i++) {
            console.log(checkId[i]);
        }
        if (checkId.length > 0) {
            window.location.href = "deleteAllBookInfoById?checkId=" + checkId;
        } else {
            alert("请选择")
        }
    }
}

servlet

package com.library.servlet;

import com.library.service.BookInfoService;
import com.library.service.impl.BookInfoServiceImpl;

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 java.io.IOException;

@WebServlet("/deleteAllBookInfoById")
public class DeleteAllBookInfoById extends HttpServlet {
    BookInfoService bookInfoService = new BookInfoServiceImpl();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("utf-8");
        String checkId = req.getParameter("checkId");
        String[] split = checkId.split(",");
        for (int i = 0; i < split.length; i++) {
            bookInfoService.deleteBookInfoById(Integer.parseInt(split[i]));
        }
        resp.sendRedirect("bookInfoList");
    }
}