取得包含所有input的Array
監聽input的click事件
click即觸發勾選的函式
課程重點
其實這個實作的code非常簡短，如下
const checkboxes = document.querySelectorAll(“.inbox input”);
let lastChecked;
let inBetween = false;
checkboxes.forEach(checkbox => checkbox.addEventListener(“click”, handleCheck));
function handleCheck(e) {
if(e.shiftKey && this.checked){
checkboxes.forEach(checkbox => {
if(checkbox === this || checkbox === lastChecked)
inBetween = !inBetween;
if(inBetween)
checkbox.checked = true;
})
}
lastChecked = this;
}
首先取得所有input elements，當input被click時觸發handleCheck函式。無論有沒有按shift鍵來勾選，都會把這個被click的input指定為lastChecked。
而如果是按著shift鍵且是勾選(不是取消勾選)的話，就會把所有input以迴圈的方式查看一遍，一個一個看input是this(這次點選的)還是lastChecked(上次點選的)。所以只會有兩個input能進入這個if，就是這次點的跟上次點的兩個input，也就是當你在多選項目時的起點跟終點。
inBetween是個Flag標記，在遇到this或lastChecked時會變成true，直到遇到下一個lastChecked或this，才會變回false。而這之間所經歷的其他input的inBetween都會維持在true，所以會被勾選。