摘要：實(shí)現(xiàn)中按住的多選功能作者簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。同時(shí)，將所有標(biāo)記為的項(xiàng)設(shè)置為選中。此外，對(duì)于取消選中，無(wú)法批量操作。

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

選中 A 項(xiàng)

按下 Shift

再選中 B 項(xiàng)

A-B 之間的所有項(xiàng)都被選中或者取消

Wes Bos 在文檔里提供了一種解決辦法：用一個(gè)變量，來(lái)標(biāo)記這個(gè)范圍。

變量初始值為 false，當(dāng)按下 Shift 鍵且同時(shí)選中了某個(gè)元素的時(shí)候，遍歷所有項(xiàng)，遍歷過(guò)程中，若遇到 A 或 B，則將標(biāo)記值取反。同時(shí)，將所有標(biāo)記為 true 的項(xiàng)設(shè)置為選中。

let startChecked;

//    處理方法一：用變量 inBetween 對(duì)需要選中的元素進(jìn)行標(biāo)記
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;
}

上面會(huì)出現(xiàn)一個(gè)問(wèn)題，初次加載頁(yè)面時(shí)，按住 Shift 再點(diǎn)擊某一項(xiàng)，此項(xiàng)之后的元素都會(huì)被選中。此外，對(duì)于取消選中，無(wú)法批量操作。下面方法三是緝熙Soyaine 的操作邏輯。方法二是我對(duì)Wes Bos實(shí)現(xiàn)方法邏輯的改進(jìn)，方法二和方法三取消和選中均可批量操作。

let startChecked;
let onOff = false;
//    處理方法二：新增onOff變量存儲(chǔ)復(fù)選框?qū)⒁淖兊臓顟B(tài)
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; 根據(jù)startChecked設(shè)置要改變的狀態(tài)。同時(shí)在if (inBetween && input !== startChecked || input === this)代碼里面做了修改，新增了|| input === this，否則會(huì)出現(xiàn)最后一個(gè)的狀態(tài)和其他復(fù)選框狀態(tài)不一致的bug。

方法一中的 inBetween 僅僅表示此項(xiàng)是否在被選中的范圍中，此處會(huì)賦給它更多的意義，用它來(lái)表示此項(xiàng)是選中還是未選中，而范圍劃定則由數(shù)組來(lái)解決。

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

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

// 處理方法二：利用數(shù)組索引獲取需要選中的范圍
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;
}

轉(zhuǎn)換 Nodelist 為數(shù)組

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

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

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

截取該范圍內(nèi)的數(shù)組元素，并改變選中狀態(tài)

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

確定選中 or 取消選中

onOff = startChecked.checked ? true : false;

標(biāo)記 A 值

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

Github Source Code

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