js全选当用户点击全选按钮时子列表全部选中当子列表有一个没有选中全选按钮不选中当子列表全部选中全选按钮选中

本文链接：https://blog.csdn.net/m0_64520392/article/details/131441653

逻辑分析

全选: 当用户点击全选时子列表中全部为选中状态，再次点击全部取消

子列表：当所有子按钮被选中时全选按钮为选中状态如果有一个未选中则全选按钮未选中

代码如下


<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>全选</title>
	</head>
	<style>
		*{
			list-style: none;
		}
	</style>
	<body>
		<div>
			<p>请选择你的兴趣爱好</p>
			<input id="kasiwoder" type="checkbox">全选
			<ul>
				<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>
				<li><input type="checkbox" >棒球</li>
			</ul>
		</div>
	</body>
	<script>
		const Ull = document.querySelectorAll("ul li");
		const inbox = document.getElementById("kasiwoder");
		for(let i = 0; i<Ull.length; i++){
			inbox.addEventListener('click',function(){
				if(inbox.checked==true){
					Ull[i].childNodes[0].checked = true;	
					console.log(Ull[i].childNodes[0]);
				}else{
					Ull[i].childNodes[0].checked = false;
				}
			},false)
			Ull[i].addEventListener('click',function(){
				let flag = true;//核心点 中间变量
				for (let j = 0; j < Ull.length; j++) {
					if(Ull[j].childNodes[0].checked==false){//当有一个的checkbox等于false时 让flag等于false;
						flag = false
					}
				}
				if(flag==true){
					inbox.checked = true;
				}else{
					inbox.checked = false;
				}
			},false)
		}
	</script>
</html>

如有书写错误请指出感谢！！！