利用checkbox删除数据的做法

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

首先jsp页面

<div class="main">
	<div class="optitle clearfix">
		<em><input type="button" name="button" value="添加数据" class="input-button" οnclick="location.href='pages/jsp/modify.jsp'" /></em>
		<em><input type="button" name="button" value="查询数据" class="input-button" οnclick="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" οnclick="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=?";
	@Override
	public 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