[作特效, 學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教程