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" οnclick="multipleDeleteAtt();" value="批量刪除"/>"/>
</li>


添加總複選框


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

添加子複選框


<td>
	<input name="application" type="checkbox" value="${accountBase.id}" οnclick="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";
	}
	



發佈了19 篇原創文章 · 獲贊 7 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章