使用JS完成全选和选不选操作

分析：

编写表头复选框的单击事件

在事件中获取表单中所有行的复选框

将行复选框的状态设置与表头复选框状态一致即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				text-align: center;
				width: 500px;
				margin: 0 auto;
			}
			table thead tr td{
				border: 1px solid black;
				background: #FFFF00;
			}
			table tbody tr td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td><input type="checkbox" onclick="changes(this.checked)"  id="head" />全选</td>
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>001</td>
					<td>佐菲</td>
					<td>100</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>002</td>
					<td>初代</td>
					<td>99</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>003</td>
					<td>赛文</td>
					<td>88</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>004</td>
					<td>艾斯</td>
					<td>77</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>005</td>
					<td>杰克</td>
					<td>66</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>006</td>
					<td>泰罗</td>
					<td>55</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
					<td>007</td>
					<td>雷欧</td>
					<td>44</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		//获取所有行
		var tbody=document.getElementsByTagName("tbody")
		for (var i=0;i<tbody[0].rows.length;i++) {
			if(i%2==0){
				tbody[0].rows[i].style.backgroundColor="pink";
			}else{
				tbody[0].rows[i].style.backgroundColor="red";
			}
		}
		
		function changes(checks){
			//获取全选框的状态
			var checkones=document.getElementsByName("checkone");
			if(checks==true){
					for (var a=0;a<checkones.length;a++) {
						checkones[a].setAttribute("checked","checked");			
					}
			}else{
				for (var a=0;a<checkones.length;a++) {
					checkones[a].removeAttribute("checked");
				}
			}
				
		}
		
	</script>
</html>

使用JS完成全选和选不选操作

猜你喜欢