iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

實作經典 JavaScript 30系列 第 14

Day14: 一次選取想要選取的checkbox

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


上一篇
Day13: 認識console
下一篇
Day15: 自製的影片撥放器(一)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言