Javascript Jquery 复选框的全选、单选与反选、批量删除

最新推荐文章于 2019-03-14 16:55:45 发布

转载最新推荐文章于 2019-03-14 16:55:45 发布 · 4.8k 阅读

文章标签：

#html #javascript #全选 #反选 #复选框

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格操作的方法，包括全选、反选、子项点击更新全选状态等功能，并通过AJAX实现了批量删除操作。

// --- 列头全选框被单击 ---
function ChkSelectAll(subName, chkAllId){
	var arrSub = document.getElementsByName(subName);
	var chkAll = document.getElementById(chkAllId);
	var tempStatus=chkAll.checked;
	for(i=0;i<arrSub.length;i++) {
		if(arrSub[i].checked!=tempStatus)
			arrSub[i].click();
	}
}

// --- 子项复选框被单击 ---
function ChkSubClick(subName, chkAllId) {
	var arrSub = document.getElementsByName(subName);
	var chkAll = document.getElementById(chkAllId);
	for(var i=0; i<arrSub.length; i++) {
		if(!arrSub[i].checked) {
			chkAll.checked = false;
			return;
		}
	}
	chkAll.checked = true;
}

// --- 反选被单击 ---
function ChkSelectInverse(subName){
	var arrSub = document.getElementsByName(subName);
	for(i=0;i<arrSub.length;i++) {
		arrSub[i].click();
	}
}

// JavaScript Document
$(document).ready(function() {
	// 全选
	$("#allChk").click(function() {
		$("input[name='subChk[]']").prop("checked",this.checked);
    });
	
	// 单选
	var subChk = $("input[name='subChk[]']")
	subChk.click(function() {
        $("#allChk").prop("checked", subChk.length == subChk.filter(":checked").length ? true:false);
    });
	
	/* 批量删除 */
	$("#del_model").click(function() {
		// 判断是否至少选择一项
		var checkedNum = $("input[name='subChk[]']:checked").length;
		if(checkedNum == 0) {
			alert("请选择至少一项！");
			return;
		}
		
		// 批量选择	
		if(confirm("确定要删除所选项目？")) {
			var checkedList = new Array();
			$("input[name='subChk[]']:checked").each(function() {
                checkedList.push($(this).val());
            });

			$.ajax({
				type: "POST",
				url: "../models/delete.php",
				data: {'items':checkedList},
				success: function(result) {
					alert(result);
					window.location.reload();
				}
			});
		}			
    });
});