摘要：實現中按住的多選功能微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰。同時，將所有標記為的項設置為選中。此外，對于取消選中，無法批量操作。

(Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)

作者：?liyuechun  
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現在你看到的是這系列指南的第 10 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

選中 A 項

按下 Shift

再選中 B 項

A-B 之間的所有項都被選中或者取消

Wes Bos 在文檔里提供了一種解決辦法：用一個變量，來標記這個范圍。

變量初始值為 false，當按下 Shift 鍵且同時選中了某個元素的時候，遍歷所有項，遍歷過程中，若遇到 A 或 B，則將標記值取反。同時，將所有標記為 true 的項設置為選中。

let startChecked;

//    處理方法一：用變量 inBetween 對需要選中的元素進行標記
function handleCheck0(e) {
    let inBetween = false;
    if(e.shiftKey && this.checked){
        boxs.forEach(input => {
            console.log(input);
            if(input === startChecked || input ===this) {
                inBetween = !inBetween;
            }
            if(inBetween) {
                console.log("on");
                input.checked = true;
            }
    });
    }
    startChecked = this;
}

上面會出現一個問題，初次加載頁面時，按住 Shift 再點擊某一項，此項之后的元素都會被選中。此外，對于取消選中，無法批量操作。下面方法三是緝熙Soyaine 的操作邏輯。方法二是我對Wes Bos實現方法邏輯的改進，方法二和方法三取消和選中均可批量操作。

let startChecked;
let onOff = false;
//    處理方法二：新增onOff變量存儲復選框將要改變的狀態
function handleCheck2(e) {
 let inBetween = false;
 if (e.shiftKey) {
   onOff = startChecked.checked ? true : false;
   boxs.forEach(input => {
     console.log(input);
     if (input === startChecked || input === this) {
       inBetween = !inBetween;
     }
     if (inBetween && input !== startChecked || input === this) {
       input.checked = onOff;
     }
   });
   startChecked = this;
 }
 startChecked = this;
}

onOff = startChecked.checked ? true : false; 根據startChecked設置要改變的狀態。同時在if (inBetween && input !== startChecked || input === this)代碼里面做了修改，新增了|| input === this，否則會出現最后一個的狀態和其他復選框狀態不一致的bug。

方法一中的 inBetween 僅僅表示此項是否在被選中的范圍中，此處會賦給它更多的意義，用它來表示此項是選中還是未選中，而范圍劃定則由數組來解決。

首先將獲取到的 組轉化為數組，針對每次操作，獲取 A 和 B，利用 indexOf() 來獲得 A 和 B 在數組中的索引值，由此即可確定范圍，并能通過 slice() 來直接截取 A-B 的所有 DOM 元素，并進行狀態改變的操作，而變量 onOff 表示 A-B 范圍內的狀態，true 表示選中，false 表示取消選中。

const boxArr = Array.from(boxs);
let startChecked;
let onOff = false;

// 處理方法二：利用數組索引獲取需要選中的范圍
function handleCheck1(e) {
    if(!startChecked) startChecked = this;
    onOff = startChecked.checked ? true : false;
    if(e.shiftKey) {
        let start = boxArr.indexOf(this);
        let end = boxArr.indexOf(startChecked);
        boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);
        console.log(start + "+" + end);
    }
    startChecked = this;
}

轉換 Nodelist 為數組

const boxs = document.querySelectorAll(".inbox input[type="checkbox"]");
const boxArr = Array.from(boxs);

針對按下了 Shift 鍵的情況，獲取 A-B 范圍

let start = boxArr.indexOf(this);
let end = boxArr.indexOf(startChecked);

截取該范圍內的數組元素，并改變選中狀態

boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);

確定選中 or 取消選中

onOff = startChecked.checked ? true : false;

標記 A 值

if(!startChecked) startChecked = this;
/* ... */
startChecked = this;

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記