checkbox批量删除功能

今天来实现一个批量删除的功能：

批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下：

这里写图片描述

但是不管数据库以哪种形式的sql删除，想要批量删除，那么前台传到后台的id肯定是多个哟！！！

1、下面就正式开如吧，下面是前台代码片段，迭代的时候取得它的索引号：这个索引是从0开始的，如果想要1，那么就+1就好啦—-${st.index+1}(如下图：)

这里写图片描述

当然啦，上面图片的情况是你是需要手动+1的，你也可以使用另一种方法，不需要+1，它和${st.index+1}效果是一样的呢，如下图:

这里写图片描述

2、接下来呢，页面需要的效果，点击全选按钮，则全选，再点击一次则取消全选；当所有子选择按钮都选中，则全选按钮选中，哪怕有一个子选择按钮没有选中，全选按钮就不会选中:

js代码如下：

实现方法一：
1、看到那个

/为删除按钮绑定事件*/ $("#btn").click(function(){ /获取下面选中的checkbox*/ var checkedbox = $("input[id^='box_']:checked"); if(checkedbox.length == 0){ alert("请选择要删除的部门！！！"); }else{ if(confirm("你确定要删除吗？？？")){ var ids = new Array(); checkedbox.each(function(){ ids.push(this.value); }); alert(ids); } } });

——当然上面的拿值方式只是其中一种呢，上面的拿值方法也可以使用下面的map方法来实现呢……

 实现方法二： /为删除按钮绑定事件*/ $("#btn").click(function(){ /获取下面选中的checkbox*/ var checkedbox = $("input[id^='box_']:checked"); if(checkedbox.length == 0){ alert("请选择要删除的部门！！！"); }else{ if(confirm("你确定要删除吗？？？")){ / 如下面，如果调用map方法， 会把函数里面的返回值作为jquery对象--res返回 注意，这里的res.toArray()等同于res.toArray().join(","); 它默认就是这样做的呢，这个需要记住嘛 */ var res = checkedbox.map(function(){ return this.value; }); alert(res); alert(res.toArray()); alert(res.toArray().join(",")); } } });

4、然后通过以下方法把ids传到后台去呢！

这里写图片描述

window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(",");

在这里配上前台完整jsp页面：

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>  <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <c:set var="path" value="${pageContext.request.contextPath}"> 
   c:set> <html> <head> <title>部门管理 
   title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap-responsive.min.css" /> <link rel="stylesheet" type="text/css" href="${path}/css/style.css" /> <link rel="stylesheet" type="text/css" href="${path}/css/pager.css" /> <script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"> 
   script> <script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"> 
   script> <script type="text/javascript" src="${path}/js/bootstrap.min.js"> 
   script> <style type="text/css"> body { padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }  
   style> <script type="text/javascript"> $(function(){ 
     /为全选绑定点击事件*/ $("#checkAll").click(function(){ 
     /获取其下面的所有checkbox * 注意这里的input[id^='box_']表示 获取input标签，它的id都是以box_开头的，的这一系列的节点 这里的^表示的就是开头的意思. 这里的attr("checked",this.checked)还需要解释一下，特别是 this.checked，这里的this表示的是全选的那个checkbox(#checkAll)的dom元素， 也就是拿到这个全选的checkAll的checkbox的checked属性给它就好了 */ $("input[id^='box_']").attr("checked",this.checked); }); /还需要为每一个子checkbox绑定事件呢 ，当下面的子checkbox全部都选中的时候，上面的全选按扭 也应该要全部选中 */ $("input[id^='box_']").click(function(){ 
    //点击每一个子checkbox，都会触发这个事件 /获取到下面所有checkbox*/ var boxs = $("input[id^='box_']"); /* * 下面是为checkAll设置它是否checked属性 boxs.length表示的是所有子checkbox的个数 boxs.filter(":checked").length表示是过滤出所有 子checkbox当中已经被点击选中的checkbox的个数，如果个数相等， 那么就会返回true,如果不相等，就返回false */ $("#checkAll").attr("checked",boxs.length == boxs.filter(":checked").length); }); /为删除按钮绑定事件*/ $("#btn").click(function(){ 
     /获取下面选中的checkbox*/ var checkedbox = $("input[id^='box_']:checked"); if(checkedbox.length == 0){ alert("请选择要删除的部门！！！"); }else{ if(confirm("你确定要删除吗？？？")){ / 如下面，如果调用map方法， 会把函数里面的返回值作为jquery对象--res返回 注意，这里的res.toArray()等同于res.toArray().join(","); 它默认就是这样做的呢，这个需要记住嘛 */ var res = checkedbox.map(function(){ 
     return this.value; }); window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(","); } } }); });  
   script>  
   head> <body> <form class="form-inline definewidth m20" action="#" method="post"> <a class="btn btn-primary" href="${path }/identity/showAddDept.action">添加部门 
   a> <input class="btn btn-primary" type="button" id="btn" value="删除"/>  
   form> <table class="table table-bordered table-hover definewidth m10"> <thead> <tr> <th width="5%"><input type="checkbox" id="checkAll"/>全选 
   th> <th>部门编号 
   th> <th>部门名称 
   th> <th>部门备注 
   th> <th>操作 
   th>  
   tr>  
   thead> <s:iterator value="depts" status="st"> <tr> <td><input type="checkbox" value="${id }" id="box_${st.index+1 }"/>${st.count } 
   td> <td><s:property value="id"/> 
   td> <td><s:property value="name"/> 
   td> <td><s:property value="remark"/> 
   td> <td> <a href="${path }/identity/showUpdateDept.action?dept.id=${id}">修改 
   a>  
   td>  
   tr>  
   s:iterator>  
   table>  
    <itcast:pager pageIndex="${pageModel.pageIndex }" pageSize="${pageModel.pageSize }" recordCount="${pageModel.recordCount }" submitUrl="${path}/identity/selectDept.action?pageModel.pageIndex={0}"/>  
   body>  
   html>