JavaScript中全选/不全选

最新推荐文章于 2024-10-02 05:39:15 发布

QiuBO.

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量166

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_70648941/article/details/127104951

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="selectAll"/>全选/全不选
		
		<ul class="shop">
			<li> <input type="checkbox"/>苹果</li>
			<li> <input type="checkbox"/>梨</li>
			<li> <input type="checkbox"/>葡萄</li>
			<li> <input type="checkbox"/>香蕉</li>
			<li> <input type="checkbox"/>榴莲</li>
		</ul>
		<script type="text/javascript">
			//给全选绑定一个单击事件
			document.getElementById("selectAll").onclick=function(){
				//this:指的是当前触发单击事件的元素
				console.log(this.checked)
				//获取当前全选的选中状态
				var isChecked=this.checked
				//获取到所有的水果的复选框
				var cbs=document.querySelectorAll(".shop input")
				//通过循环来将全选的状态赋值给水果的复选框
				for(var i=0;i<cbs.length;i++){
					cbs[i].checked=isChecked
				}
			}
			
		</script>
	</body>
</html>

this:指的是当前触发单击事件的元素

给所有的水果的复选框绑定单击事件

//给所有的水果的复选框绑定单击事件
			for(var i=0;i<cbs.length;i++){
				cbs[i].onclick=function(){
					var count=0;//用来统计选中的复选框的个数
					for(var j=0;j<cbs.length;j++){
						//判断复选框的选中状态
						if(cbs.checked){
							count++
						}
					}
					//判断选中的复选框的个数与实际的复选框的个数是否相等
					if(count==cbs.length){
						//将全选的复选框的状态改为选中
						document.getElementById("selectAll").checked=true
					}else{
						//将全选的复选框的状态改为取消
						document.getElementById("selectAll").checked=false
					}
				}
			}