复选框的全选与全不选

最新推荐文章于 2022-12-02 12:26:48 发布

云飞扬°

最新推荐文章于 2022-12-02 12:26:48 发布

阅读量325

点赞数

分类专栏： JavaScript 文章标签： checkbox的全选与全不选

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90271250

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

复选框的全选与全不选

全选和全不选步骤分析
  1.确定事件：onclick()单击事件
  2.事件触发函数：checkAll()
  3.函数要去做一些事情

关键代码：

	function checkAll(){
				
			//获得当前第一个checkbox
			  var check1 = document.getElementById("check1");
			//得到当前checked的状态
			  var checked = check1.checked;
			  
			// 获得所有分类项的checkbox
          
			var checks = document.getElementsByTagName("input");  //方法1
           
            //var checks = document.getElementsByName("checkone"); //方法2
			  
			// 修改每一个checkbox的状态
			for (var i=0;i<checks.length;i++) {
				var checkone =  checks[i];
				checkone.checked = checked;
			}
		}

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function init(){
				//得到表格
				var tab = document.getElementById("tab");
				//得到表格中每一行
				var rows = tab.rows;
				//遍历所有的行，然后根据奇数、偶数
				for(var i=0;i<rows.length;i++){
					var row = rows[i];  //得到其中的某一行
					if(i%2==0){
						row.bgColor = "red";
					}else{
						row.bgColor = "yellow";
					}	
				}
			}
			
		function checkAll(){
				
			//获得当前第一个checkbox
			  var check1 = document.getElementById("check1");
			//得到当前checked的状态
			  var checked = check1.checked;
			  
			// 获得所有分类项的checkbox
                 //方法1
			  var checks = document.getElementsByTagName("input");
                 //方法2
              //var checks = document.getElementsByName("checkone");
			  
			// 修改每一个checkbox的状态
			for (var i=1;i<checks.length;i++) {
				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>海尔，TCL，康佳</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>
	</table>			
	</body>
</html>

云飞扬°

关注

0
点赞
踩
0

收藏

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

复选框的全选与全不选全选和全不选步骤分析1.确定事件：onclick()单击事件2.事件触发函数：checkAll()3.函数要去做一些事情关键代码： function checkAll(){ //获得当前第一个checkbox var check1 = document.getElementById("check1"); //...
复制链接

扫一扫

专栏目录