利用checkbox删除数据的做法

说实话挺失败本来想用js写个原生的ajax出来提交删除的，但是失败了，时间紧就用了jqueryAjax提交，这里做个记录和讲解吧，免得以后自己忘了。

首先jsp页面

<div class="main"><div class="optitle clearfix"><em><input type="button" name="button" value="添加数据" class="input-button" onclick="location.href='pages/jsp/modify.jsp'" /></em><em><input type="button" name="button" value="查询数据" class="input-button" onclick="location.href='billsList.action'" /></em><em><input type="button" name="button" value="删除数据" class="input-button" id="delete"/></em><div class="title">账单管理>></div></div><div class="content"><table class="list"><tr><td>全选<input type="checkbox" name="allcheckbox" id="allchoose" onclick="checkAll();"/></td><td>账单编号</td><td>商品名称</td><td>商品数量</td><td>交易金额</td><td>是否付款</td><td>供应商名称</td><td>商品描述</td><td>账单时间</td></tr><c:forEach items="${bills}" var="bill"><tr><td><input type="checkbox" name="billdel" value="${bill.id}"/></td><td>${bill.id}</td><td>${bill.name}</td><td>${bill.count}</td><td>${bill.money}</td><td><c:if test="${bill.payfor eq 0}"><c:out value="未付款"/></c:if><c:if test="${bill.payfor eq 1}"><c:out value="已付款"/></c:if></td><td>${bill.suppName}</td><td>${bill.content}</td><td>${bill.time}</td></tr></c:forEach></table></div>

checkbox最好的把id属性和name属性都写上。删除按钮也最好是写上id和name属性

/** *传到action的checkbox数组 */$(function(){$("#delete").bind("click",function(){var bill = $("input[name='billdel']:checked").serialize();$.ajax({url: "deleteBills.action",type: "post",data: bill,async:true,success: function () {location.reload();//提交数据成功后，返回来要执行的函数}});});});

这个就是jquery方法的ajax，解释一下：

$("#delete").bind("click",function() 这句就是说找到id为delete的bind绑定一个click事件

var bill = $("input[name='billdel']:checked").serialize();这句的bill其实被语句一赋值，就是个数组了，serialize是

序列化一组表单元素,将表单内容编码为用于提交的字符串。

success：function()是提交成功后，在执行的函数，里面我重新加载了一下数据。不然删除了数据，页面不动看不到效果。其他参数就简单。

这个bill数组我是提交到Struts2的action里面的，所以在action里面要建立一个以checkbox的name属性值(billdel) int[] billdel;变量。第一块代码中能找到。在action中添加get/set方法。

int[] billdel;public int[] getBilldel() {return billdel;}public void setBilldel(int[] billdel) {this.billdel = billdel;}

这样action就能直接接收到了。不用做其他的。
在action中通过for循环把biildel循环出来你会发现数组的每个值就是value值，

<input type="checkbox" name="billdel" value="${bill.id}"/>

这样就可以用id来找要删除的语句了，我用的是ssh框架，具体的在daoImpl里面：

String hql = "delete Bill where id=?";@Overridepublic void deleteBillsList(int[] param1) {Session si = factorytools.getSession();Query query ;for(int i=0;i<param1.length;i++){query = si.createQuery(hql);int param = param1[i];query.setInteger(0,param);query.executeUpdate();}}

代码就是这样的。

希望你们看了能和我交流下用js写原生的Ajax提交删除。

补充一下：全选checkbox的js

/** * checkbox的全选按钮 */function checkAll() {  for (var i = 0; i < document.getElementsByName("billdel").length; i++) {   document.getElementsByName("billdel")[i].checked = document.getElementById("allchoose").checked;  } }

这个是用js写的，其实你把他换成jquery的写法一样可以，逻辑反正就是这么样的。第一片jsp页面代码有全选checkbox里面有个onclick属性就是调用的这个js