JS实现全选功能

最新推荐文章于 2024-05-03 11:08:18 发布

SXxx_

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.8k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/SXxx_/article/details/122247673

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10px" id="table_type">
			<tr>
				<th></th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>家庭住址</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="stu" id="" value="nan" /></td>
				<td>张三1</td>
				<td>男</td>
				<td>19</td>
				<td>龙岩市</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="stu" id="" value="nv" /></td>
				<td>张三2</td>
				<td>女</td>
				<td>19</td>
				<td>龙岩市</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="stu" id="" value="nan" /></td>
				<td>张三3</td>
				<td>男</td>
				<td>19</td>
				<td>龙岩市</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="stu" id="" value="nv" /></td>
				<td>张三3</td>
				<td>女</td>
				<td>19</td>
				<td>龙岩市</td>
			</tr>
		</table>
		<td><input type="checkbox" name="" id="checkbox_all" value=""  onclick="dooclick()"/></td>全选
		<td><input type="checkbox" name="" id="checkbox_nan" value=""  onclick="dooclick_nan()"/></td>全选男
		<td><input type="checkbox" name="" id="checkbox_nv" value=""  onclick="dooclick_nv()"/></td>全选女
	</body>
	<script type="text/javascript">
		var table_type = document.getElementById('table_type')
		var input_all = table_type.getElementsByTagName('input')
		var checkbox_all = document.getElementById('checkbox_all')
		var checkbox_nan = document.getElementById('checkbox_nan')
		var checkbox_nv = document.getElementById('checkbox_nv')
		console.log(input_all[0].value)
		function dooclick(){
			for (var i = 0; i < input_all.length; i++) {
				input_all[i].checked = checkbox_all.checked
			}
		}
		function dooclick_nan(){
			for (var i = 0; i < input_all.length; i++) {
				if(input_all[i].value == 'nan'){
					input_all[i].checked = checkbox_nan.checked
				}
				
			}
		}
		function dooclick_nv(){
			for (var i = 0; i < input_all.length; i++) {
				if(input_all[i].value == 'nv'){
					input_all[i].checked = checkbox_nv.checked
				}
				
			}
		}
	</script>
</html>

页面效果：
在这里插入图片描述

SXxx_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现全选功能

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" cellpadding="10px" id="table_type"> <tr> <th></th>
复制链接

扫一扫