JS實現全選功能

本文轉載自查看原文 2018-03-12 10:44 14392 JavaScript

000. 開始

　　學習JS有一段時間了，最近看了一些JS練手的小demo實例，自己也嘗試着用JS進行實現。

　　全選功能是在很多注冊頁面、獲取用戶興趣愛好、讓用戶勾選一些選項等頁面中常見的一種效果，主要有全選/全不選，反選，重置，提交等幾個功能。

　　現在我們就開一步一步的開始解析代碼。另外注意一下，這里面運用到了一些外部的CSS文件和JS文件，單純的只復制下面的代碼可能不會出現你想要的結果，請移步github地址獲取完整源代碼：

https://github.com/JinganGuo/JavascriptDemos

001. HTML部分

 1 <!--
 2     @authors Guo Jingan (gja1026@163.com)
 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. 結束

　　以上就是全選功能的代碼實現，還是很容易實現的，大家也可以自己嘗試一下，同時若文章有表述問題或着有該功能更好的實現方式，歡迎討論。

　　一個正努力邁向前端行業的大三狗，記住要不斷學習！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript實現全選功能 vim實現全選功能使用js實現復選框的全選、取消功能原生JS實現購物車全選多選按鈕功能 JS實現表單全選以及取消全選實例原生JS實現全選和不全選 js實現checkbox組全選和取消全選 vue實現checked 全選功能 echarts圖例全選功能實現簡單的單選和全選功能實現