前端速成：双月Java之旅（week4）_day3

最新推荐文章于 2024-09-15 09:47:04 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-15 09:47:04 发布

阅读量77

点赞数

文章标签： java 前端 servlet

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126071241

版权

今天学习的内容是表格的全勾选或者全不选，即勾选某个特定表格，可以达到将这一表格内全部的方框选中。

技术分析：要实现表格的勾选，首先需要可勾选的内容，即<input type="checkbox">，表格勾选时有属性checked="checked"，从而达到选中的效果。

步骤分析：

1.确定事件：onclick单击事件

2.事件触发函数：checkAll()

3.函数的具体内容：获得当前第一个checkbox的状态，然后获得所有分类项的checkbox，最后修改每一个checkbox的状态。

以下则是全选的代码，首先我们在全选的方框处设置点击触发函数οnclick="checkAll()"，然后根据步骤分析定义checkAll函数。我们对其中的<script>进行分析，首先我们需要获取到第一个复选框的状态，然后根据document.getElementByTagName("input")获取所有复选框，然后定义一个for循环，从第二个复选框开始，将每一个复选框的checked属性设置成与第一个复选框的checked属性相同即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkAll(){
				var check1 = document.getElementById("check1");
				var checked = check1.checked;
				var checks = document.getElementsByTagName("input");
				for(var i=1;i<checks.length;i++){
					var checkone = checks[i];
					checkone.checked = checked;
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" width="300px" height="300px">
			<tr>
				<td width="150px">
					<input type="checkbox" onclick="checkAll()" id="check1">全选
				</td>
				<td>编号</td>
			</tr><tr>
				<td>
					<input type="checkbox">
				</td>
				<td>1</td>
			</tr><tr>
				<td>
					<input type="checkbox">
				</td>
				<td>2</td>
			</tr><tr>
				<td>
					<input type="checkbox">
				</td>
				<td>3</td>
			</tr><tr>
				<td>
					<input type="checkbox">
				</td>
				<td>4</td>
			</tr><tr>
				<td>
					<input type="checkbox">
				</td>
				<td>5</td>
			</tr>
		</table>
	</body>
</html>