主題

實作出按住 Shift 點擊 check list ，達到連續選取的效果

成果

完整程式碼
Demo效果

實作重點

Javascript

1. 類陣列轉陣列：使用 querySelectorAll ****抓到全部的 input ，並將類陣列轉為陣列。

   1. 使用 Array.form 轉成陣列。

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

2. 找出每個打勾起來的 checkboxes 事件：forEach 監聽每個 check 是否打勾

   checkboxes.forEach(checkbox => checkbox.addEventListener('click', clickHandler));
   

3. 找到是否按住 shiftKey 鍵：建立 function clickHandler ，在點擊 e 事件中點開PointerEvent 可以找到，如果按住 shift 鍵點擊時，shiftKey 會變成 true 。

   function clickHandler(e) {
     if (this.checked) {
       // 檢查是否按住 Shift 鍵
       if (e.shiftKey && lastChecked !== null) {
         // 邏輯處理
       }
     }
   }
   

4. 建立一個最後點擊的變數，備用。

   let lastCheck = null;
   

5. 點擊後的事件處理

   if (this.checked) {
   // 如果有被點擊
   }
   

   1. 再判斷如果點擊時有按著 shiftKey 且 lastChecked 不是 null

      if (e.shiftKey && lastCheck !== null) {
      
      }
      
      

      1. 紀錄點擊的 index 值：使用 indexOf 方法找到當前 checkboxes 的索引值

         let nowCheck = checkboxes.indexOf(this);
         
         

      2. 用 slice 找到點擊的區間： 因為不確定使用者怎麼點，所以用 Math.min 和 Math.max 找到對應值

         checkboxes.slice(
           Math.min(nowCheck, lastCheck),
           Math.max(nowCheck, lastCheck)
         ).forEach(input => (input.checked = true));
         

      3. 再利用 forEach 把區間的都打勾

         checkboxes.slice(
         	...
         ).forEach(input => (input.checked = true));
         

   2. 記錄 index 第幾筆

      lastCheck = checkboxes.indexOf(this);
      

6. 如果沒有點擊

   1. 記錄 null