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

时间  2019-11-17
标签 特效 复选框 全选 全不 栏目 JavaScript 繁體版
原文   原文链接

最终效果

代码

<!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>
复制代码

专栏地图

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程