使用js完成表格全选与全不选

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

白芍爱上蒲公英

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

阅读量307

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_46381608/article/details/107403299

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选与不选</title>
		<script>
			function checkall(){
				//1.获取编号前面的复选框
				var checkallEle = document.getElementById("checkall");
				//2.对编号前面复选框的状态进行判断
				if(checkallEle.checked==true){
					//3.获取下面所有的复选框
					var checkones = document.getElementsByName("checkone");
					//4.对获取的所有复选框进行遍历
					for(var i=0;i<checkones.length;i++)
					{
						//5.拿到每一个复选框，并将其状态置为选中
						checkones[i].checked=true;
					}
				}
				else{
					//6.获取下面所有的复选框
					var checkones = document.getElementsByName("checkone");
					//7.对获取的所有复选框进行遍历
					for(var i=0;i<checkones.length;i++)
					{
						//8.拿到每一个复选框，并将其状态置为选中
						checkones[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl">
			<thead>
			    <tr>
			        <td colspan="4">
			        	<input type="button" value="添加" />
			        	<input type="button" value="删除" />
			        </td>
			    </tr>
				<tr>
					<td> <input type="checkbox" onclick="checkall()" id="checkall"/> </td>
					<th >编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td> <input type="checkbox" name="checkone" /> </td>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>

	</body>
</html>