checkbox批量删除功能

参考：http://www.jb51.net/article/35338.htm 感谢作者

代码片段：jsp

 1 <c:forEach items="${infolist }" var="info">
 2         <tr>
 3           <td style="text-align:left; padding-left:20px;"><input type="checkbox" id="infoid" name="id" value="${info.id }" />${info.id }</td>
 4           <td><input type="text" name="seq" value="${info.seq }" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
 5           <td width="10%"><a href="<%=request.getContextPath()%>/infomactionServlet?id=${info.id}">${info.nickname }</a></td>
 6           <td>${info.url }</td>
 7           <td><font color="#00CC99">${info.codeNo }</font></td>
 8           <td>${info.smalltype.name }</td>
 9           <td>
10           <c:if test="${empty info.updateDate}">${info.createDate }</c:if>
11           <c:if test="${not empty info.updateDate}">${info.updateDate }</c:if></td>
12           <td>
13               <div class="button-group">
14                   <a class="button border-main" href="<%=request.getContextPath()%>/editInfoServlet?id=${info.id}"><span class="icon-edit"></span> 修改</a> 
15                   <a class="button border-red" href="javascript:infodel(${info.id })" ><span class="icon-trash-o"></span> 删除</a> 
16               </div>
17           </td>
18         </tr>
19            </c:forEach>
20       <tr>
21         <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall" onclick="javascript:swapCheck()"/>全选 </td>
22         <td colspan="7" style="text-align:left;padding-left:20px;"><a href="javascript:DelSelect()" class="button border-red icon-trash-o" style="padding:5px 15px;" > 删除</a>

js处理：

 1 //批量删除
 2 function DelSelect(){
 3     //判断是否至少选择一项
 4     var checkedNum = $("input[name='id']:checked").length;
 5     if(checkedNum==0){
 6         alert("请至少选择一项！");
 7         return;
 8     }
 9     //批量选择
10     if(confirm("确定要删除所选项目？")){
11         var checkedList = new Array();
12         $("input[name='id']:checked").each(function(){
13             checkedList.push($(this).val());
14         });
15         $.ajax({
16             type:"POST",
17             url:"<%=request.getContextPath()%>/delMoreInfoServlet",
18             data:{
19                 "delitems":checkedList.toString()
20             },
21             success:function(msg){
22                 if(msg=="success"){
23                     $("[name='id']:checkbox").prop("checked",false);//把复选择框清空
24                     window.location.href="<%=request.getContextPath()%>/infoListServlet";
25                 }
26                 
27             }
28         });
29     }
30 }

servlet:

 1 public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3 
 4         response.setContentType("text/html");
 5         PrintWriter out = response.getWriter();
 6         InfoMactionService mactionService=new InfoMactionServiceImpl();
 7         String infos=request.getParameter("delitems");
 8         String[] items = infos.split(",");
 9         for(int i=0;i<items.length;i++){
10             mactionService.delInfoById(items[i]);
11         }
12         out.write("success");
13     }

现在已经完全不想用form作提交到后端处理数据了

直接ajax好爽歪歪呀！！！

posted @ 2017-01-24 11:21  sincoolvip  阅读(633)  评论(0)  编辑  收藏  举报