JS学习笔记-表单的全选

电玩女神 2023-06-22 08:24 0阅读 0赞

## 表单的全选 ##

**1.页面的布局和样式**

以下是一个导演信息表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格全选</title> <style type="text/css"> table{ 
    				border: 1px solid;
    				width: 500px;
    			}
    			
    			td,th{ 
    				text-align: center;
    				border: 1px solid;
    			}
    			
    			div{ 
    				margin-top: 10px;
    			}
    			.out{ 
    				
    			}
    			.over{ 
    				background-color: palegreen;
    			}
    		</style>
    		<script src="js/selected.js"></script>
    	</head>
    	<body>
    		<table border="" cellspacing="" cellpadding="" align="center">
    			<caption>导演信息表</caption>
    			<tr name="tr">
    				<th><input type="checkbox" name="cb" id="first"></th>
    				<th>编号</th>
    				<th>姓名</th>
    				<th>性别</th>
    				<th>操作</th>
    			</tr>
    			
    			<tr name="tr">
    				<td><input type="checkbox" name="cb"></td>
    				<td>1</td>
    				<td>李安</td>
    				<td>男</td>
    				<td><a href="javascript:void(0)">删除</a></td>		
    			</tr>
    			
    			<tr name="tr">
    				<td><input type="checkbox" name="cb"></td>
    				<td>2</td>
    				<td>张艺谋</td>
    				<td>男</td>
    				<td><a href="javascript:void(0)">删除</a></td>		
    			</tr>
    			
    			<tr name="tr">
    				<td><input type="checkbox" name="cb"></td>
    				<td>3</td>
    				<td>王家卫</td>
    				<td>男</td>
    				<td><a href="javascript:void(0)">删除</a></td>		
    			</tr>
    		</table>
    		<div align="center">
    			<input type="button" id="selectAll" value="全选">
    			<input type="button" id="unselectAll" value="全不选">
    			<input type="button" id="selectAllRev" value="反选">
    		</div>
    	</body>
    </html>

**2.js文件**

//在页面加载完后绑定事件
    			window.onload = function(){ 
    				//给全选事件绑定单击事件
    				document.getElementById("selectAll").onclick = function(){ 
    					//全选
    					//获取所有checkbox
    					var cbs = document.getElementsByName("cb");
    					//遍历
    					for(var i=0;i<cbs.length;i++){ 
    						//设置每一个cb的状态为选中
    						cbs[i].checked = true;
    					}
    				};
    				document.getElementById("unselectAll").onclick = function(){ 
    					//全不选
    					//获取所有checkbox
    					var cbs = document.getElementsByName("cb");
    					//遍历
    					for(var i=0;i<cbs.length;i++){ 
    						//设置每一个cb的状态为未选中
    						cbs[i].checked = false;
    					}
    				};
    				document.getElementById("selectAllRev").onclick = function(){ 
    					//反选
    					//获取所有checkbox
    					var cbs = document.getElementsByName("cb");
    					//遍历
    					for(var i=0;i<cbs.length;i++){ 
    						//设置每一个cb的状态为与当前相反
    						cbs[i].checked = !cbs[i].checked;
    					}
    				};
    				document.getElementById("first").onclick = function(){ 
    					//选第一个其他也跟着选
    					//获取所有checkbox
    					var cbs = document.getElementsByName("cb");
    					//遍历
    					for(var i=1;i<cbs.length;i++){ 
    						//设置后面的状态为与第一个相同
    						cbs[i].checked = this.checked;
    					}
    				};
    				//给所有tr绑定鼠标移动到元素上和移出元素事件
    				var trs = document.getElementsByName("tr");
    				//遍历
    				for(var i=0;i<trs.length;i++){ 
    					//移到元素之上
    					trs[i].onmouseover = function(){ 
    						this.className = "over";
    				}
    				//移出元素
    				trs[i].onmouseout = function(){ 
    					this.className = "out";
    				}
    			};
    }

**3.效果**  
点击按钮会实现按钮所表达的功能，鼠标在哪一行，哪一行会有绿色的背景，点击第一个选择框，其他也会和第一个一起改变，并且是一样的变化。  
![例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191215133638839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70