复选框全选，取消全选，获取选中的数据

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>[[#{text.suffix}]]</title>
    <link rel="icon" th:href="@{/img/favicon.ico}"/>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" />
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}" ></script>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        body{
            width:100%;
            height:100%;
            background:url(/img/f209.jpg) #000 no-repeat;
            color:#ffffff;
        }
        h4,label{
            color: black;
        }
        #tbs{
            table-layout:fixed;
            word-wrap:break-word
        }
    </style>
</head>
<body>
     <div class="container">
         <div class="container">
             <a class="btn btn-danger" th:href="@{/}" role="button">主页</a>
             <h1 >
                 总记录:<span th:text="${total}"></span>
             </h1>
             <button type="button" class="btn btn-success" onclick="queryId()">查询选中</button>
         </div>
 
         <table class="table" id="tab">
             <thead>
             <th><input type='checkbox' name='check' onclick='selectAll(this)'></th>
             <th>id</th>
             <th>备忘录内容</th>
             <th>备忘录类型</th>
             </thead>
             <tbody id="tbs">
 
             </tbody>
         </table>
         <div id="demo8"></div>
     </div>
<script>
    $(function(){
        fenye("");
    })
    function fenye(content){
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;
            //自定义排版
            $.ajax({
                type:'post',
                dataType:'json',
                data:{
                    'curr':1,
                    'limit':10,
                    'content':content
                },
                url:'/recyM/DataShow3',
                success:function(data){
                    showData(data);
                    laypage.render({
                        elem: 'demo8'
                        ,count: data.ct
                        ,layout: ['limit', 'prev', 'page', 'next']
                        ,jump:function(obj){
                            //分页切换的回掉
                            $.ajax({
                                type:'post',
                                dataType:'json',
                                data:{'curr':obj.curr,'limit':obj.limit,'content':obj.content},
                                url:'/recyM/DataShow3',
                                success:function(data){
                                    showData(data);
                                }
                            })
                        }
                    });
                }
            })
        });
    }
 
    function queryId() {
           var obj=document.getElementsByName("check");
           var check_val=[];
           for (i in obj){
               if (!obj[i].checked){
                  continue;
               }
               if (obj[i].value=='on'){
                  continue;
               }
               check_val.push(obj[i].value)
           }
 
        for(k in check_val){
            console.log(check_val[k]);
        }
 
        console.log(check_val)
 
        console.log(check_val.toLocaleString())
 
        $.ajax({
            url:"/recyM/resumeMemo",
            type:"post",
            data:{
                idList:check_val.toLocaleString()
            },
            dataType:"json",
            success:function (data) {
                  if (data==1){
                      history.go(0);
                  }
            }
 
        });
 
    }
 
    //全选或者取消全选
    function selectAll(chb) {
       // 获得id为data的table下tbody下的tr下的第一个td中的input，保存在变量chbs中
        var data=document.getElementById("tab");
        chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
 
       //遍历chbs中的每一个chb
        for(var i=0;i<chbs.length;i++){
       //设置当前chb的checked等于chb的checked
            chbs[i].checked=chb.checked;
        }
 
    }
    function showData(ds){
        $("#tbs").empty();
        var htmlStr="";
        var sign=0;
        for(var i=0;i<ds.data.length;i++){
            htmlStr+="<tr>";
            htmlStr+="<td><input type='checkbox' name='check' value='"+ds.data[i].id+"'></td>";
            htmlStr+="<td>";
            htmlStr+=ds.data[i].id;
            htmlStr+="</td>";
            htmlStr+="<td>";
            htmlStr+="<p>"+ds.data[i].recycledMemoContent+"</p>";
            htmlStr+="<p>删除时间 "+ds.data[i].deleteMemoTime+"</p>";
            htmlStr+="<p>最后修改时间 "+ds.data[i].recycledMemoOperateTime+"</p>";
            htmlStr+="<p>操作用户 "+ds.data[i].user+"</p>";
            htmlStr+="</td><td>";
            if(ds.data[i].sign==1){
                sign="公有备忘录";
            }
            if(ds.data[i].sign==0){
                sign="私有备忘录";
            }
            htmlStr+=sign;
            htmlStr+="</td></tr>"
 
        }
        $("#tbs").append(htmlStr);
    }
</script>
</body>
</html>