JavaScript实现表格中的复选框全选与反全选

最新推荐文章于 2022-05-06 20:04:31 发布

二木成林

最新推荐文章于 2022-05-06 20:04:31 发布

阅读量395

点赞数

分类专栏： # JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/cnds123321/article/details/102632224

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

效果展示

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th><input type="checkbox" onclick="selectedAll(this,'selected_item');" /></th>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="selected_item"></td>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>15</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="selected_item"></td>
				<td>2</td>
				<td>李四</td>
				<td>女</td>
				<td>25</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="selected_item"></td>
				<td>3</td>
				<td>王五</td>
				<td>男</td>
				<td>19</td>
			</tr>
		</table>

		<script type="text/javascript">
			// 实现已选课程复选框checkbox全选与反全选
			/**
			 * @ all 指的是要实现全选的复选框
			 * @ tdClassName 指的是td中的input复选框的类名
			 */
			function selectedAll(all, tdClassName) {
				var items = document.getElementsByClassName(tdClassName);
				if (all.checked == true) {
					for (var i = 0; i < items.length; i++) {
						items[i].checked = true;
					}
				} else {
					for (var j = 0; j < items.length; j++) {
						if ((items[j]).checked == false) {
							items[j].checked = true;
						} else {
							items[j].checked = false;
						}
					}
				}
			}
		</script>
	</body>
</html>