js表格的全选全不选

最新推荐文章于 2024-10-16 16:37:10 发布

万万没想到2022

最新推荐文章于 2024-10-16 16:37:10 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/w2019424/article/details/96483752

版权

在这里插入图片描述
如图所示，全选的代码需要在相应的位置定义，运行效果如图：

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function init(){
			var tab = document.getElementById("tab");
			var rows = tab.rows;
			for(var i=1;i< rows.length;i++){
				var row = rows[i];
				
				if(i%2==0){
					row.bgColor = "skyblue";
				}else{
					row.bgColor = "yellowgreen";
				}
			}
		}
		function checkAll(){
			var check1 = document.getElementById("check1");
			var checked = check1.checked;
		//	var checks = document.getElementsByTagName("input");
			var checks = document.getElementsByName("checkone");
			for(var i=0;i < checks.length;i++){
				var checkone = checks[i];
				checkone.checked = checked;
			}
		}
	</script>
</head>
<body onload="init()">
	<table border="1px" width="600px" id="tab">
		<tr>
			<td>
				<input type="checkbox" onclick="checkAll()" id="check1"/>
			</td>
			<td>分类ID</td>
			<td>分类名称</td>
			<td>分类商品</td>
			<td>分类描述</td>
			<td>操作</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>1</td>
			<td>手机数码</td>
			<td>华为,小米</td>
			<td>华为很好</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>2</td>
			<td>特种水果</td>
			<td>榴莲</td>
			<td>火龙果</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>3</td>
			<td>电脑办公</td>
			<td>联想,小米</td>
			<td>笔记本特卖</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>4</td>
			<td>馋嘴店铺</td>
			<td>良品铺子</td>
			<td>三只松鼠,百草味</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
	</table>
</body>
</html>