js-demo-全选或全不选

最新推荐文章于 2019-08-25 18:31:26 发布

heedjay

最新推荐文章于 2019-08-25 18:31:26 发布

阅读量147

点赞数

分类专栏： JavaScript-demo

本文链接：https://blog.csdn.net/qq_42687264/article/details/81301455

版权

JavaScript-demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

根据以上效果图，我们先完成静态布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全选</title>
</head>
<style>
	*{margin:0; padding: 0;}
	#wrap{
		width: 400px;
		border: 1px solid #aaa;
		border-radius: 15px;
		margin: 50px auto;
	}
	ul{
		padding: 30px 0;
		list-style: none;
	}
	ul li{
		height: 60px;
		line-height: 60px;
		padding: 0 15px;
		background: url("images/ck.png") no-repeat 20px 20px;
		border-bottom: 1px solid #aaa;
		text-indent: 90px;
		cursor: pointer;
		color: #fff;
	}
	ul li.on{
		background-image: url("images/cked.jpg");
		text-indent: 70px;
	}
	#all{
		height: 60px;
		line-height: 60px;
		padding: 0 15px;
		background: url("images/ck.png") no-repeat 20px 20px;
		text-indent: 70px;
		cursor: pointer;
		font-size: 16px;
		font-weight: 700;
	}
	#all.on{
		background-image: url("images/cked.jpg");
	}
</style>
<body>
	<div id="wrap">
		<ul id="list">

		</ul>
		<p id="all">全选</p>
	</div>
</body>
</html>

完成布局后，利用js动态生成li里面的每个项目

length可以传入任意整数

<script>
(function(length){
    var oUl = document.getElementById("list"),
	aLi = oUl.getElementsByTagName("li"),
	oAll = document.getElementById("all");
			
	//生成length个 li标签列表
	(function(){
		var arrColor = ["#333","#666","#999"],
		str = "";
		for(var i=0; i < length ; i++){
		str += "<li style='background-color:" + arrColor[i%3] + " ;'>项目" + (i + 1) +"</li>"; 
		}
		oUl.innerHTML = str;
		})();	
})(6);
</script>

利用for循环为每个li添加点击事件

//为每个li添加点击事件
(function(){
	for (var i = 0; i < length; i++) {
	    aLi[i].onclick = function(){
	        //名字的变化
	        this.className = this.className ? "":"on";
	    }
	}
})();

全选点击事件

//oAll 的点击事件
(function(){
	oAll.onclick = function(){
		var cName;
		if (this.className) {
			this.className = "";
			cName = "";
		}else{
			this.className = "on";
			cName = "on";
		}
		for (var i = 0; i < length; i++) {
			//假设oAll 有名字 所有的li都要有名字 如果没有名字就应该没有名字
			aLi[i].className = cName;
		}
	}
})();

最后实现当所有的li都勾选上的时候，全选会自动勾选上。如果有一个li未被勾选，全选按钮会被取消勾选。

//各个点击事件
(function(){
	var num = 0;//记录已选的li
	for (var i = 0; i < length; i++) {
		aLi[i].onclick = function(){
			//名字的变化
			this.className = this.className ? "":"on";
			//变化完之后，判断，改变计数器
			this.className ? num++:num--;
			//判断计数器，决定全选按钮是否勾选
			oAll.className = num===length?"on":"";
		}
	}
	//oAll 的点击事件
	(function(){
		oAll.onclick = function(){
			var cName;
			if (this.className) {
				this.className = "";
				cName = "";
				num = 0;
			}else{
				this.className = "on";
				cName = "on";
				num = length;
			}
			for (var i = 0; i < length; i++) {
				//假设oAll 有名字 所有的li都要有名字 如果没有名字就应该没有名字
				aLi[i].className = cName;
			}
		}
	})();
})();

以上代码关键在于在声明一个变量num=0计数器，用于记录li的勾选个数。勾选上一个就自加一，反之减一。

当num等于length的时候。表示所有的li都被勾选上。那么全选就会自动被勾选上。只要其中任意一个为被勾选，全选按钮都不会勾选。

注意：全选按钮点击的时候，如果是全部选中 num=length 如果全部不选 num=0;

以下为完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全选</title>
</head>
<style>
	*{margin:0; padding: 0;}
	#wrap{
		width: 400px;
		border: 1px solid #aaa;
		border-radius: 15px;
		margin: 50px auto;
	}
	ul{
		padding: 30px 0;
		list-style: none;
	}
	ul li{
		height: 60px;
		line-height: 60px;
		padding: 0 15px;
		background: url("images/ck.png") no-repeat 20px 20px;
		border-bottom: 1px solid #aaa;
		text-indent: 90px;
		cursor: pointer;
		color: #fff;
	}
	ul li.on{
		background-image: url("images/cked.jpg");
		text-indent: 70px;
	}
	#all{
		height: 60px;
		line-height: 60px;
		padding: 0 15px;
		background: url("images/ck.png") no-repeat 20px 20px;
		text-indent: 70px;
		cursor: pointer;
		font-size: 16px;
		font-weight: 700;
	}
	#all.on{
		background-image: url("images/cked.jpg");
	}
</style>
<body>
	<div id="wrap">
		<ul id="list">

		</ul>
		<p id="all">全选</p>
	</div>

	<script>
		/*
			动态方法 ByClassName ByTagName ByName ...
			静态方法 querySelectorAll

		*/
		(function(length){
			var oUl = document.getElementById("list"),
				aLi = oUl.getElementsByTagName("li"),
				oAll = document.getElementById("all");
			
			//生成length个 li标签列表
			(function(){
				var arrColor = ["#333","#666","#999"],
					str = "";
				for(var i=0; i < length ; i++){
					str += "<li style='background-color:" + arrColor[i%3] + " ;'>项目" + (i + 1) +"</li>"; 
				}
				oUl.innerHTML = str;
			})();	

//各个点击事件
(function(){
	var num = 0;//记录已选的li
	for (var i = 0; i < length; i++) {
		aLi[i].onclick = function(){
			//名字的变化
			this.className = this.className ? "":"on";
			//变化完之后，判断，改变计数器
			this.className ? num++:num--;
			//判断计数器，决定全选按钮是否勾选
			oAll.className = num===length?"on":"";
		}
	}
	//oAll 的点击事件
	(function(){
		oAll.onclick = function(){
			var cName;
			if (this.className) {
				this.className = "";
				cName = "";
				num = 0;
			}else{
				this.className = "on";
				cName = "on";
				num = length;
			}
			for (var i = 0; i < length; i++) {
				//假设oAll 有名字 所有的li都要有名字 如果没有名字就应该没有名字
				aLi[i].className = cName;
			}
		}
	})();
})();
		})(6);
	</script>
</body>
</html>