js综合练习---实现全选、多选、反选操作（三）

最新推荐文章于 2022-08-24 11:03:55 发布

原创最新推荐文章于 2022-08-24 11:03:55 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js练习

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现表格中全选、多选和反选的功能，通过实例代码讲解了核心逻辑，对于提升JavaScript操作DOM的能力具有一定的帮助。

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
	<br/>
	<input type="checkbox" name="love"/>篮球
	<input type="checkbox" name="love"/>排球
	<input type="checkbox" name="love"/>羽毛球
	<input type="checkbox" name="love"/>乒乓球
	<br/>
	<input type="button" value="全选" onclick="selAll();"/>
	<input type="button" value="全不选" onclick="selNo();"/>
	<input type="button" value="反选" onclick="selOther();"/>
	<script type="text/javascript">
		//实现全选和全不选
		function selAllNo() {
			/*
				1、得到上面那个复选框
					- 通过id获取到
				2、判断这个复选框是否是选中
					- if条件，checked==true
				3、如果是选中，下面是全选
				4、如果不是选中，下面是全不选
			*/
			//得到上面复选框
			var box1 = document.getElementById("boxid");
			//判断这个复选框是否是选择
			if(box1.checked == true) { //是选择状态
				//调用全选方法
				selAll();
			} else { //不是选中状态
				//调用全不选方法
				selNo();
			}
		}

		//实现反选的操作
		function selOther() {
			/*
				1、获取到要操作的复选框
				2、返回数组，遍历数组
				3、得到每一个复选框

				4、判断当前的复选框是选中还是不选中
					- if(love1.checked == true) {}
				5、如果选中，属性checked设置成false，否则，设置成true
			*/
			//获取要操作的复选框
			var loves11 = document.getElementsByName("love");
			//遍历数组
			for(var a=0;a<loves11.length;a++) {
				//得到每一个复选框
				var love11 = loves11[a];
				//判断当前这个复选框是什么状态
				if(love11.checked == true) { //是选中的状态
					//设置checked=false
					love11.checked = false;
				} else { //是不选中的状态
					//把checked=true
					love11.checked = true;
				}
			}
		}

		//实现全不选的操作
		function selNo() {
		
			/*
				1、获取到要操作的复选框
				2、返回的是数组，遍历数组
				3、得到每一个复选框
				4、设置复选框的属性 checked=false
			*/
			//得到要操作的复选框
			var loves1 = document.getElementsByName("love");
			//遍历数组
			for(var j=0;j<loves1.length;j++) {
				//得到每一个复选框
				var love1 = loves1[j];
				//设置属性的值checked = false;
				love1.checked = false;
			}
		}

		//实现全选的操作
		function selAll() {
			/*
				1、获取要操作的复选框 
					- 使用getElementsByName()
				2、返回是数组，
					- 属性 checked判断复选框是否选中
						*** checked = true; //表示选中
						*** checked = false;//表示不选中
					- 遍历数组，得到的是每一个checkbox
						* 把每一个checkbox属性checked=true					
			*/
			//获取要操作的复选框
			var loves = document.getElementsByName("love");
			//遍历数组，得到每一个复选框
			for(var i=0;i<loves.length;i++) {
				var love1 = loves[i]; //得到每一个复选框
				//设置属性是true
				love1.checked = true;
			}
		}
		
	</script>

 </body>
</html>