學習資料：
Alex老師教學
PJCHENder筆記

鍵盤事件增強，按住shift可勾選選兩點之間的所有checkbox

抓取節點並轉為陣列

		let checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
    //console.log(checkboxes);
    checkboxes = Array.from(checkboxes);//轉為陣列
    //console.log(checkboxes);

做出監聽

	let chickHandler = (e) => {

    };
    checkboxes.forEach(item => {
        item.addEventListener('click', chickHandler);
    });

設定第一個點擊的位置紀錄，並判斷是否打勾

let firstCheck = null; //紀錄第一個點擊的編號，先預設空值
    function chickHandler(e) {
        // console.log(e); //勾選查看事件物件內容
        //先確認是否打勾
        if (this.checked) {
		  firstCheck = checkboxes.indexOf(this); //紀錄打勾位置的編號
        } else {
          firstCheck = null; //不是打勾就清除
        }
    }

第二重判斷，是否按住Shift以及是否有先點擊第一個勾

    function chickHandler(e) {
        // console.log(e); //勾選查看事件物件內容
        //先確認是否打勾
        if (this.checked) {
            // 判斷是否有按shift && 是否有上一個被點開的check
            if (e.shiftKey && firstCheck !== null) {
                let nowCheck = checkboxes.indexOf(this); //目前點擊的位置
            }
            firstCheck = checkboxes.indexOf(this); //紀錄打勾位置的編號
        } else {
            firstCheck = null; //不是打勾就清除
        }
    }

有兩個位置的資料後進行判斷

		if (e.shiftKey && firstCheck !== null) {
            let nowCheck = checkboxes.indexOf(this); //目前點擊的位置
            // console.log(nowCheck);
            checkboxes
                // 用兩個點擊的位置切出一個區段
                .slice(
                    // 不論由前往後或由後往前按都可以選取
                    Math.min(nowCheck, firstCheck),
                    Math.max(nowCheck, firstCheck)
                )
                //用切好的區段跑forEach
                .forEach(item => {
                    return (item.checked = true);
                });
        } else {
            firstCheck = checkboxes.indexOf(this); //紀錄打勾位置編號
            // console.log(firstCheck);
        }

以上就完成了，為了操作更順暢，需要回頭修改HTML，使點擊文字也可選取打勾

<label class="item">
    <input type="checkbox">
    <p>Just regular JavaScript</p>
</label>

因為點選文字時會出現反白效果導致干擾選取，透過CSS設定使反白無效

.item {
(略)
    user-select: none;
}

這樣就完成了。

連結