JQuery练习：批量删除以及全选

红太狼 2024-04-17 15:19 54阅读 0赞

先看界面，以及要实现的功能：

![在这里插入图片描述][2019082720441723.png]

需求:
    	全选状态：全部选中。取消全选全部取消。
    	点击删除按钮，删除相应勾选的记录。
    	在全选状态中删除全部后，删除完要取消全选。
    	
    思路：
    	获取到每个选项框的状态，根据选项框的状态来判断是否删除。
    	全选的话；获取了每个选项框对象，存到一个数组变量中，遍历设置"checked"值。

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    		<script type="text/javascript">
    			$(function() {
    				//通过选择器的合理运用，可以获取到复选框对象;
    				//#1 父类、td:first-child 第一个td子标签、 input 子类;
    				var checks = [$("#1 td:first-child input"), $("#2 td:first-child input"), $("#3 td:first-child input")];
    
    				//单个点击时
    				$.toChecked(checks);
    				//全选
    				$.toChkAll(checks);
    				//删除
    				$.toDel(checks);
    			})
    			//删除
    			$.toDel = function(checks){
    				$("#btnDel").click(function(){
    					//点击删除按钮之后，将被选中的一行记录移除。需要获取到父类的父类;
    					$(checks).each(function(){
    						if($(this).attr("checked")=="checked"){
    							$(this).parent().parent().remove();
    						}
    						//删除完之后，取消全选状态。
    						$("#chkAll").removeAttr("checked");
    					})
    				})
    			}
    			//全选
    			$.toChkAll = function(checks) {
    				//开关变量
    				var isChecked = false;
    				$("#chkAll").click(function() {
    					//点击全选后，根据开关变量的值，执行相应的遍历语句。变成全选或者全不选;
    					if(isChecked) {
    						$(checks).each(function() {
    							$(this).removeAttr("checked");
    						})
    					}else {
    						$(checks).each(function() {
    							$(this).attr("checked", "checked");
    						})
    					}
    					isChecked = !isChecked;
    				})
    			}
    			//单个
    			$.toChecked = function(checks) {
    				var isChecked = false;
    				$(checks).each(function() {
    					
    					this.click(function() {
    						if(isChecked) {
    							$(this).removeAttr("checked");
    						}
    						isChecked = !isChecked;
    
    					})
    				})
    			}
    		</script>
    	</head>
    
    	<body>
    
    		<table border="1" align="center">
    			<tr>
    				<th>选项</th>
    				<th>编号</th>
    				<th>昵称</th>
    				<th>种族</th>
    			</tr>
    			<tr id="1">
    				<td><input type="checkbox" value="1" /></td>
    				<td>007</td>
    				<td>亚托克斯</td>
    				<td>恶魔</td>
    			</tr>
    			<tr id="2">
    				<td><input type="checkbox" value="2" /></td>
    				<td>001</td>
    				<td>亚索</td>
    				<td>浪人</td>
    			</tr>
    			<tr id="3">
    				<td><input type="checkbox" value="3" /></td>
    				<td>008</td>
    				<td>赫卡里姆</td>
    				<td>人马</td>
    			</tr>
    			<tr>
    				<td colspan="4">
    					<span><input id="chkAll" type="checkbox" />全选</span>
    					<span><input id="btnDel" type="button" value="删除"/></span>
    				</td>
    			</tr>
    		</table>
    
    	</body>
    
    </html>

[2019082720441723.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e2bb00d96ec2499587d023beda0bb013.png