WES BOS系列影片
Alex快速導讀系列影片

今天要嘗試做一個todo-list的小功能，
按下shift鍵時，可以一次勾選代辦事項。

1.首先抓出所有checkbox，因為待會會使用到slice()方法，
所以先使用Array.from將類陣列轉換為可操作的陣列。

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

2.再來一一監聽每個checkbox

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click',checkHandler)
})

3.撰寫checkHandler函式
除了確定使用者是否有按下shift鍵之外，也需要確定使用者上一步是否有按下任何checkbox
所以我們需要先設定一個lastCheck的初始值，假設使用者還未按下任何按鍵

let lastCheck = null

接下來才撰寫checkHandler函式，
條件一 :確定使用者上一步是否有按下任何checkbox

有:才確認是否有按下shiftKey
沒有:lastCheck 維持在null狀態

function checkHandler(e) {
    if (this.checked) {
        //條件二:是否有按下shiftKey
    else {
      lastCheck = null
    } 
}

條件二 :如果按下shiftKey且lastCheck!== null。

有按下shiftkey時，且使用者已經有按過某個checkbox，
我們才需要知道使用者下一個按下的checkbox是那一個(nowCheck)。
如果沒有按下shiftkey，則只需紀錄使用者最後一個按下的checkbox(lastCheck)
得到nowCheck與lastCheck的index值之後
就可以使用slice()的方法，將需要勾選的checkbox都選起來

function checkHandler(e) {
    if (this.checked) {
      if (e.shiftKey && lastCheck !== null) {
        let nowCheck = checkboxes.indexOf(this)
        checkboxes.slice( 
          Math.min(nowCheck, lastCheck),
          Math.max(nowCheck, lastCheck))
          .forEach(input => (input.checked = true))
      }
      else {
        lastCheck = checkboxes.indexOf(this)
      }
    }
    else {
      lastCheck = null
    } 
}

但其實這還是很不完整的功能，尤其在參考了gmail的選取功能後，更有這種感覺。
有時間的話還是希望自己能夠把這個功能做得更完整，
今天的筆記就到這裡，未來有時間再進一步把功能做完。

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30