js实现复选框批量操作

//批量删除项目  js方法
		        function multipleDeleteAtt(){
			debugger;
			var m = document.getElementsByName("application");
				var l = "";
				for (var i = 0; i < m.length; i++) {
					if (m[i].checked == true) {
						if (l == "") {
							l = m[i].value;
						} else {
							l = l + "," + m[i].value;
						}
					}
				}
				if (l == "") {
					top.$.jBox.tip("请选择删除选项");
				} else {
					
					jBox.confirm('确定删除吗', '提示', function (v, h, f) {
			            if (v === 'ok') {
			            	$.post("${ctx}/contacts/accountBase/deleteAccount",
									{
										aid : l
									}, function(data) {
										if (data == "success") {
											top.$.jBox.tip("删除成功!","success");
											window.location.reload();
										
										} else {
											top.$.jBox.tip("删除错误"/>");
										}
									});
			            }
					  });
				}
			}
		function checkAll(obj) {
			var bool = obj.checked;
			var cs = document.getElementsByName("application");
			var csCount = cs.length;
			for (var i = 0; i < csCount; i++) {
				var checkboxSon = cs[i];
				checkboxSon.checked = bool;
			}
		}
		function checkedParent() {
			var checkboxParent = document.getElementById("checkboxParent");
			var cs = document.getElementsByName("application");
			var csCount = cs.length;
			var num = 0;
			for (var i = 0; i < csCount; i++) {
				var checkboxSon = cs[i];
				if (checkboxSon.checked) {
					num += 1;
				}
			}
			if (num == csCount) {
				checkboxParent.checked = true;
			} else {
				checkboxParent.checked = false;
			}
		}
		

然后添加删除按钮

<li class="btns">
    <input id="btnSubmit" class="btn btn-primary" type="button" onclick="multipleDeleteAtt();" value="批量删除"/>"/>
</li>


添加总复选框


<th width="2%">					<input type="checkbox" id="checkboxParent" onclick="checkAll(this)" />
</th>

添加子复选框


<td>
	<input name="application" type="checkbox" value="${accountBase.id}" onclick="checkedParent()" />
</td>

后台写ajax处理方法

        @ResponseBody
        @RequestMapping(value = "deleteAccount")
	public String deleteProject(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		
		try {
			String[] aid = request.getParameter("aid").split(",");
			for (int i = 0; i < aid.length; i++) {
				AccountBase accountBase = new AccountBase();
				accountBase.setId(aid[i]);
				accountBaseService.delete(accountBase);
                                //可以进行这类操作
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "success";
	}
	



猜你喜欢

转载自blog.csdn.net/my_interface/article/details/79651745