通過JS實現對一系列checkbox的全選功能，實現全選/全不選、複位，反選等。 ...
000. 開始
學習JS有一段時間了，最近看了一些JS練手的小demo實例，自己也嘗試著用JS進行實現。
全選功能是在很多註冊頁面、獲取用戶興趣愛好、讓用戶勾選一些選項等頁面中常見的一種效果，主要有全選/全不選，反選，重置，提交等幾個功能。
現在我們就開一步一步的開始解析代碼。另外註意一下，這裡面運用到了一些外部的CSS文件和JS文件，單純的只複製下麵的代碼可能不會出現你想要的結果，請移步github地址獲取完整源代碼：
https://github.com/JinganGuo/JavascriptDemos
001. HTML部分
1 <!-- 2 @authors Guo Jingan ([email protected]) 3 @date 2018-02-15 4 @intro 全選功能 5 !--> 6 <!DOCTYPE html> 7 <html lang="en"> 8 <head> 9 <meta charset="UTF-8"> 10 <title>全選功能練習(CheckAll)</title> 11 <link rel="stylesheet" href="style.css"> 12 <link rel="stylesheet" type="text/css" href="../commonCSS.css"> 13 <script src="checkAll.js"></script> 14 </head> 15 <body> 16 <header> 17 <p>全選功能</p> 18 </header> 19 <form id="myForm" action="#" method="post"> 20 請選擇您的興趣愛好： 21 <input type="checkbox" id="checkOrCancelAll"><label for="checkOrCancelAll">全選/取消全選</label> 22 23 <br><br> 24 25 <input type="checkbox" name="item" id="football" value="足球"><label for="football">足球</label> 26 <input type="checkbox" name="item" id="running" value="跑步"><label for="running">跑步</label> 27 <input type="checkbox" name="item" id="swimming" value="游泳"><label for="swimming">游泳</label> 28 <input type="checkbox" name="item" id="reading" value="閱讀"><label for="reading">閱讀</label> 29 <input type="checkbox" name="item" id="coding" value="寫代碼"><label for="coding">寫代碼</label> 30 31 <br><br> 32 33 <input type="button" class="button" name="choice" id="checkAll" value="全選"> 34 <input type="button" class="button" name="choice" id="invert" value="反選"> 35 <input type="button" class="button" name="choice" id="reset" value="複位"> 36 <input type="button" class="button" id="submit" value="提交"> 37 38 </form> 39 </body> 40 </html>View Code
在這個小demo中，第一次學習並運用了<label>標簽，將該標簽的for屬性設置為對應的id屬性值，可以在頁面中點擊文字也能選中對應的checkbox，若不設置便只能點擊那個小小的方框才能選中checkbox。
HTML部分不做介紹，CSS代碼也不貼出來了，基本沒有什麼樣。
002. JS部分
首先，先自定義一個單擊響應函數，方便以後我們對指定元素進行單擊響應事件綁定。
1 /** 2 *設置單擊響應函數 3 * @param {[String]} objStr [ 要設置單擊響應事件的元素的id ] 4 * @param {[function]} fun [ 單擊後響應的行為 ] 5 * @return {[none]} 6 */ 7 function myClick(objStr, fun) { 8 var obj = document.getElementById(objStr); 9 obj.onclick = fun; 10 }
獲取所有可以選擇的checkbox可選項：
var hobbies = document.getElementsByName("item");
全選/全不選功能，當用戶勾選這個checkbox時，所有選項全選；否則，全不選。
Checkbox對象有一個屬性：checked， 可以用來設置或返回 checkbox 是否應被選中。
為此checkbox添加一個單擊響應函數，函數內部對其進行判定，如果它的狀態被勾選（即this.checked == true），則將所有的可選項的checked屬性設置為false，反之設置為true。
1 // 獲取全選/全不選選項 2 var checkOrCancelAll = document.getElementById("checkOrCancelAll"); 3 4 // 全選/全不選 5 myClick("checkOrCancelAll", function() { 6 if(this.checked){ 7 for (var i = 0; i < hobbies.length; i++) { 8 hobbies[i].checked = true; 9 } 10 }else{ 11 for (var i = 0; i < hobbies.length; i++) { 12 hobbies[i].checked = false; 13 } 14 } 15 });
全選：將可選項的checked屬性設置為ture；
複位：將可選項的checked屬性設置為false；
1 // 全選 2 myClick("checkAll", function() { 3 for (var i = 0; i < hobbies.length; i++) { 4 hobbies[i].checked = true; 5 } 6 checkOrCancelAll.checked = true; 7 }); 8 9 // 複位 10 myClick("reset", function() { 11 for (var i = 0; i < hobbies.length; i++) { 12 hobbies[i].checked = false; 13 } 14 checkOrCancelAll.checked = false; 15 });
反選：將已經選擇的取消，為選擇的選中，特別註意那個“全選/全不選”的處理。
1 // 反選 2 myClick("invert", function() { 3 checkOrCancelAll.checked = true; 4 for (var i = 0; i < hobbies.length; i++) { 5 6 if (hobbies[i].checked) { 7 hobbies[i].checked = false; 8 checkOrCancelAll.checked = false; 9 } else { 10 hobbies[i].checked = true; 11 } 12 } 13 });
基本功能到目前為止差不多實現了，但是還存在一個問題，當用戶依次勾選每一個選項時，當全部勾選完，則“全選/全不選”應當被勾選上，再當用戶取消了一個選項，則“全選/全不選”應當被取消。
這個如何實現呢？
我們可以為每一個可選項的checkbox添加一個單擊響應事件，在響應函數內部，將“全選/全不選”預設勾選上，然後進行判斷，若存在沒有被勾選上的選項，則“全選/全不選”的checked屬性賦值為false。
1 // 給每一個checkbox添加一個單擊事件 2 for (var i = 0; i < hobbies.length; i++) { 3 hobbies[i].onclick = function() { 4 checkOrCancelAll.checked = true; 5 for (var i = 0; i < hobbies.length; i++) { 6 if (!hobbies[i].checked) { 7 checkOrCancelAll.checked = false; 8 break; 9 } 10 } 11 }; 12 }
提交：
1 // 提交 2 myClick("submit", function(){ 3 var result = new Array(); 4 for (var i = 0; i < hobbies.length; i++) { 5 if(hobbies[i].checked){ 6 result.push(hobbies[i].value); 7 } 8 } 9 if(result.length){ 10 alert("您的選擇是： \n\n" + result); 11 }else{ 12 alert("您暫時沒有勾選任何選項！"); 13 } 14 15 });
003. 結束
以上就是全選功能的代碼實現，還是很容易實現的，大家也可以自己嘗試一下，同時若文章有表述問題或著有該功能更好的實現方式，歡迎討論。
一個正努力邁向前端行業的大三狗，記住要不斷學習！
