原生js实现复选框全选全不选

最新推荐文章于 2021-09-07 18:12:38 发布

三个和尚_

最新推荐文章于 2021-09-07 18:12:38 发布

阅读量662

点赞数

分类专栏： javascript/jquery/bootstrap 文章标签： js

本文链接：https://blog.csdn.net/a974986042/article/details/84900071

版权

本文介绍了如何利用JavaScript实现复选框的全选和全不选功能。通过添加事件监听器，我们可以轻松地控制所有复选框的状态，使用户能够一键选择或取消选择所有选项。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和全不选</title>
		<script>
			function checkAll(){
				//1.获取编号前面的复选框
				var checkAllEle = document.getElementById("checkAll");
				//2.对编号前面复选框的状态进行判断
				if(checkAllEle.checked==true){
					//3.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//4.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//5.拿到每一个复选框，并将其状态置为选中
						checkOnes[i].checked=true;
					}
				}else{
					//6.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//7.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//8.拿到每一个复选框，并将其状态置为未选中
						checkOnes[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" ali