[做特效, 学JS] -- 06 复选框全选/全不选/反选

猫哥的技术博客
879 阅读3分钟

最终效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="全选">
	<input type="button" value="反选">
	<div id="div1">
		<input type="checkbox">复选框1</input>
		<br>
		<input type="checkbox">复选框2</input>
		<br>
		<input type="checkbox">复选框3</input>
		<br>
		<input type="checkbox">复选框4</input>
		<br>
		<input type="checkbox">复选框5</input>
		<br>
		<input type="checkbox">复选框6</input>
		<br>
		<input type="checkbox">复选框7</input>
		<br>
		<input type="checkbox">复选框8</input>
		<br>
		<input type="checkbox">复选框9</input>
		<br>
		<input type="checkbox">复选框10</input>
		<br>
		<input type="checkbox">复选框11</input>
		<br>
		<input type="checkbox">复选框12</input>
		<br>
		<input type="checkbox">复选框13</input>
		<br>
		<input type="checkbox">复选框14</input>
		<br>
		<input type="checkbox">复选框15</input>
		<br>
		<input type="checkbox">复选框16</input>
		<br>
		<input type="checkbox">复选框17</input>
		<br>
		<input type="checkbox">复选框18</input>
		<br>
		<input type="checkbox">复选框19</input>
		<br>
		<input type="checkbox">复选框20</input>
		<br>
	</div>
</body>
<script>
	var aInput = document.getElementById('div1').getElementsByTagName('input');
	var flag = false;
	// 判断, 何时调用全选函数, 何时调用全部选函数
	document.querySelector("input[type='button']").onclick = function(){
		// 循环遍历来判断
		for(var i = 0; i<aInput.length;i++){
			if(!aInput[i].checked){
				// 如果有一个复选框没选, flag就是false
				flag = aInput[i].checked;
			}
		}
		// flag 用来提示, 如果是false, 就说明有没选上的复选框, 应该走全选
		if (flag) {
			notSelect();
		} else {
			selectAll();
			// 因为全选后, 没有了没选上的复选框,所以应该是true
			flag = true;
		}

	}
	// // 写反选的逻辑, querySlectorAll(), 返回的是一个数组
	// document.querySelectorAll("input[type='button']")[1].onclick = function(){
	// 	alert('hello')
	// }
	
	// 写反选的逻辑
	document.querySelector("input[type='button']:nth-child(2)").onclick = function(){
		// 反选
		for(var i =0;i<aInput.length;i++){
			aInput[i].checked = !aInput[i].checked;
		}
		
	}
	// 全选的函数
	function selectAll(){
		for(var i = 0; i<aInput.length;i++){
			aInput[i].checked = true;
		}
	}
	// 选不选的函数
	function notSelect(){
		for(var i = 0; i<aInput.length;i++){
			aInput[i].checked = false;
		}
	}

</script>
</html>

专栏地图

avatar
文章
阅读
粉丝