多选，反选，回显，前台存缓存（整体代码都在这，着急用的小伙伴可以直接拿走，有空可以学一下）

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>
<%@ taglib prefix=“helper” uri="/helper-tag" %>

<%@include file="/WEB-INF/jsp/head.jsp" %> <%@include file="/WEB-INF/jsp/top.jsp" %>

<div class="main-container-inner">
    <%@include file="/WEB-INF/jsp/left.jsp" %>

    <div class="main-content">
        <!-- 正式页面内容start -->
        <div class="page-content">
            <form action="/admin/brandOperation/showBrands" method="get" id="addShowForm">
                <div class="search-div-height">
                    <div class="col-xs-13 pull-left">
                            <input type="hidden" name="id" value="${id}"/>
                        <div>品牌名搜索：<input type="text" name="brandName" value="${brandName}"/>
                            状态选择：
                            <select name="status">
                                <option value="-1">全部</option>
                                <option value="1"<c:if test="${status==1}"> selected="selected"</c:if>>已启用</option>
                                <option value="0" <c:if test="${status==0}"> selected="selected"</c:if>>未启用
                                </option>
                            </select>

                            <input type="submit" value="查询" class="btn btn-primary">
                            <input type="button" onclick="addBrand()" value="确定" class="btn btn-primary">
                        </div>

                    </div>


                </div>
            </form>
            <br/>
            <div class="row">
                <div class="col-xs-12">
                    <div class="table-responsive">
                        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th class="center">
                                    <input type="checkbox" style="margin-left: 0px" id="checkAll" name="checkAll"/>品牌选择（全选）
                                </th>
                                <th>品牌名称</th>
                                <th>Logo</th>
                                <th>国家代码</th>
                                <th>品牌状态</th>
                            </tr>
                            </thead>

                            <tbody>
                            <c:forEach items="${brandList}" var="data">

                                <tr role="row" class="data_model" id="">

                                    <td class="center">
                                        <input type="checkbox" style="margin-left: 0px" name="checkItem"
                                               value="${data.id}"/>
                                    </td>
                                    <td>${data.name}</td>
                                    </td>
                                    <td>${data.logo}</td>
                                    <td>
                                            ${data.countryCode}
                                    </td>
                                    <td>
                                        <c:if test="${data.status==1}">
                                            启用
                                        </c:if>
                                        <c:if test="${data.status==0}">
                                            未启用
                                        </c:if>

                                    </td>

                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <%@include file="/WEB-INF/jsp/paging.jsp" %>
                    </div>
                </div>
            </div>
            <div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="input-data">
        <div class="modal-dialog" style="width: 900px;">
            <div class="modal-content">
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
    <%@include file="/WEB-INF/jsp/base_script.jsp" %>
    <script type="text/javascript">
        var items;
        items = JSON.parse(window.localStorage.getItem('items')) != "" && JSON.parse(window.localStorage.getItem('items')) != null ? JSON.parse(window.localStorage.getItem('items')) : [];
        // 复选框勾选方法
       $(function () {
           if(!items.length>0 ) {
               $.ajax({
                   type: "POST",
                   url: "/admin/brandOperation/findById",
                   data: {id: $("#addShowForm input[name='id']").val()},
                   datatype: "json",
                   async: false,
                   success: function (data) {
                       var ids = data.data;
                       console.log(ids);
                       if (ids.length > 0) {
                           for (var i = 0; i < ids.length; i++) {
                               items.push(ids[i]);
                               window.localStorage.setItem('items', JSON.stringify(unique(items)));
                           }
                           show();
                       } else {
                           show();
                       }
                   }
               });
           }
           show();
            $("#checkAll").click(function () {
                if ($("#checkAll").prop("checked") == true) {
                    $(":checkbox[name='checkItem']").prop("checked", true); // this指代的你当前选择的这个元素的JS对象

                    $("input[name='checkItem']").each(function (index, item) {
                        if (this.checked) {
                            console.log(window.localStorage.getItem('items'));
                            items = JSON.parse(window.localStorage.getItem('items')) != "" && JSON.parse(window.localStorage.getItem('items')) != null ? JSON.parse(window.localStorage.getItem('items')) : [];
                            items.push(item.value);
                            window.localStorage.setItem('items', JSON.stringify(unique(items)));
                        }
                    });

                } else {
                    $(":checkbox[name='checkItem']").prop("checked", false);
                    items = JSON.parse(window.localStorage.getItem('items')) != "" && JSON.parse(window.localStorage.getItem('items')) != null ? JSON.parse(window.localStorage.getItem('items')) : [];
                    $("input[name='checkItem']").each(function (index, item) {
                        if (items.indexOf(item.value) != -1) {
                            items.splice(items.indexOf(item.value), 1);
                            console.log(items)
                            window.localStorage.setItem('items', JSON.stringify(unique(items)));
                        }

                        console.log(window.localStorage.getItem('items'));
                    });
                }

            });
            selectList();
        });
        //            d回显
        function show() {
            var b = true;
            items = JSON.parse(window.localStorage.getItem('items')) != "" && JSON.parse(window.localStorage.getItem('items')) != null ? JSON.parse(window.localStorage.getItem('items')) : [];
            $(":checkbox[name='checkItem']").each(function (index, item) {
                console.log(items);
                console.log(item.value);
                if (items.indexOf(item.value) != -1) {
                    $(this).prop("checked", true)
                } else {
                    $(this).prop("checked", false)
                    b = false;
                }
            });
            if (b) {
                $("#checkAll").prop('checked', true);
            }


        }

        function unique(arr) {
            var res = [];
            var obj = {};
            for (var i = 0; i < arr.length; i++) {
                if (!obj[arr[i]]) {
                    obj[arr[i]] = 1;
                    res.push(arr[i]);
                }
            }
            return res;
        }
        //单点
        function selectList() {
            $("input[name='checkItem']").each(function (index, item) {
                $(this).off("click").on("click", function () {
                    items = JSON.parse(window.localStorage.getItem('items')) != "" && JSON.parse(window.localStorage.getItem('items')) != null ? JSON.parse(window.localStorage.getItem('items')) : [];
                    if ($(this).prop('checked')) {
                        items.push($(this).val());

                        window.localStorage.setItem('items', JSON.stringify(unique(items)));
                        console.log(window.localStorage.getItem('items'));

                    } else {
                        $("#checkAll").prop("checked", false);
                        if (items.indexOf($(this).val()) != -1) {
                            items.splice(items.indexOf($(this).val()), 1);
                            console.log(items)
                            window.localStorage.setItem('items', JSON.stringify(unique(items)));
                        }

                        console.log(window.localStorage.getItem('items'));

                    }

                })
            });

        }

        function addBrand() {
            items = JSON.parse(window.localStorage.getItem('items'));
            var req = new Request("/admin/brandOperation/addBrands");
            var id = $("#addShowForm input[name='id']").val();
            req.data = "items=" + items + "&id=" + id ;
            req.req_post(function (data) {
                alert("操作成功");
            });
            window.localStorage.removeItem('items');
            window.location.href = "/admin/brandOperation/query";
        }

    </script>