JavaScript—复选框的全选和全不选

最新推荐文章于 2023-02-10 17:25:55 发布

小丸子i

最新推荐文章于 2023-02-10 17:25:55 发布

阅读量119

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41139281/article/details/80500039

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table {
				margin: 0px auto;
			}
			
			thead tr td {
				border: 1px solid black;
				width: 150px;
				text-align: center;
			}
			
			tbody tr td {
				border: 1px solid black;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td><input type="checkbox" οnclick="allcheckbox(this.checked)" />全选/全不选</td>
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>2</td>
					<td>李四</td>
					<td>23</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>3</td>
					<td>王五</td>
					<td>25</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>4</td>
					<td>赵六</td>
					<td>26</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>5</td>
					<td>田七</td>
					<td>28</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="checkid" /></td>
					<td>6</td>
					<td>孙八</td>
					<td>29</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		function allcheckbox(check) {
			var checkid = document.getElementsByName("checkid");
			if(check) {
				for(var i = 0; i < checkid.length; i++) {
					checkid[i].checked = true;
				}
			} else {
				for(var i = 0; i < checkid.length; i++) {
					checkid[i].checked = false;
				}
			}
		}
	</script>
</html>