今天的實作雖然看似簡單，但若要自己獨立完成，並寫得像課程那樣簡潔有力，這其中的邏輯是要花點時間思考的。這堂課所要做的是一個能夠同時勾選多項的清單，若勾選其中一個選項，接著按住shift鍵，再勾選下一個選項，這時上一個選項到這一個選項之間的所有選項都會被打勾，就像Gmail要選擇多封信的操作一樣。實作範例如下：

邏輯流程

1. 取得包含所有input的Array
2. 監聽input的click事件
3. click即觸發勾選的函式

課程重點

1. 其實這個實作的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，所以會被勾選。