摘要：實現中按住的多選功能作者簡介是推出的一個天挑戰。同時，將所有標記為的項設置為選中。此外，對于取消選中，無法批量操作。

作者：?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
全棧部落完整系列教程：全棧部落完整電子書學習筆記