【JavaScript】实现对复选框的全选和反选

最新推荐文章于 2023-03-04 22:45:49 发布

1024A

最新推荐文章于 2023-03-04 22:45:49 发布

阅读量236

点赞数

分类专栏： JavaScript 前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_58309844/article/details/126591522

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

用js实现对复选框的全选和反选

文章目录

一、实现效果
二、实现代码如下
- 1.html
- 2.js代码

一、实现效果

在这里插入图片描述

二、实现代码如下

1.html

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="all" />全选
		<hr >
		<input type="checkbox" />打游戏
		<input type="checkbox" />学习
		<input type="checkbox" />睡觉
	</body>
</html>

2.js代码

<script>
	// 获取全选input
	var _all=document.querySelector("#all");
	// 获取所有反选input
	var _inputs=document.querySelectorAll("input:not(#all)")
			
	//全选
	_all.onclick=function(){
	// 1、获取全选的状态
	var status=_all.checked;
	// 2、保证全选的checked值与反选一致
	_inputs.forEach(function(tag){
		tag.checked=status;
	  })
	}
			
	//反选
	_inputs.forEach(function(tag){
	//点击每一个复选框
	tag.onclick=function(){
	//过滤出当前已选中的所有复选框
	var chboxes=Array.from(_inputs).filter(function(obj){
		return obj.checked==true;
	})
	//如果选中的复选框个数=当前所有复选框个数
	// if(chboxes.length==_inputs.length){
	// 	_all.checked=true;
	// }else{
	// 	_all.checked=false;
	// }
					
		_all.checked=chboxes.length==_inputs.length;
	  }
	})
</script>