js复选框的全选和全不选

最新推荐文章于 2024-01-07 15:29:18 发布

无你处、无江湖

最新推荐文章于 2024-01-07 15:29:18 发布

阅读量194

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42675691/article/details/99835830

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

4. 复选框的全选和全不选

4.1 需求分析

商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品

4.2 技术分析

事件 : onclick点击事件

4.3 步骤分析

全选和全不选步骤分析:

1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 文档加载完成 onload
			2. 事件要触发函数: init()
			3. 函数:操作页面的元素
					要操作表格中每一行
					动态的修改行的背景颜色
		-->
		<script >
			function init(){
				//得到表格
				var tab = document.getElementById("tab");
				//得到表格中每一行
				var rows = tab.rows;
				//便利所有的行,然后根据奇数 偶数
				for(var i=1; i < rows.length; i++){
					var row = rows[i];  //得到其中的某一行
					if(i%2==0){
						row.bgColor = "yellow";
					}else{
						row.bgColor = "red"
					}
				}
			}
			
			/*
				全选和全不选步骤分析:
				 1.确定事件: onclick 单机事件
				 2.事件触发函数: checkAll()
				 3.函数要去做一些事情:
				 	获得当前第一个checkbox的状态
				 	获得所有分类项的checkbox
				 	修改每一个checkbox的状态
			*/
			
			function checkAll(){
//				获得当前第一个checkbox的状态
				var check1 = document.getElementById("check1");
				//得到当前checked状态
				var checked = check1.checked;
//				 获得所有分类项的checkbox
//				var checks = document.getElementsByTagName("input");
				var checks = document.getElementsByName("checkone");
//				alert(checks.length);
				for(var i = 0; i < checks.length; i++){
//				 	修改每一个checkbox的状态
					var checkone = checks[i];
					checkone.checked = checked;
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr >
				<td>
					<input type="checkbox" onclick="checkAll()" id="check1" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>2</td>
				<td>饮料</td>
				<td>酸的甜的</td>
				<td>好喝的饮料我们都有</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

无你处、无江湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js复选框的全选和全不选

4. 复选框的全选和全不选4.1 需求分析商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品4.2 技术分析事件 : onclick点击事件4.3 步骤分析全选和全不选步骤分析:1.确定事件: onclick 单机事件2.事件触发函数: checkAll()3.函数要去做一些事情:获得当前第一个checkbox的...
复制链接

扫一扫