JS30 Day 10 筆記

功能

使用 Shift + 滑鼠左鍵點擊後，可以連續選取，

step 1 : 選取到所有的 HTML checkbox

// 選取到所有的 checkbox
const checkboxes = document.querySelectorAll("input[type='checkbox']")

step 2 :將每個 checkbox 加上 click 監聽事件

// 監聽每個 checkbox 
checkboxes.forEach( checkbox =>{
  checkbox.addEventListener('click', handleClick)
})

step 3 : 建立函式 handleClick

// 建立變數 lastCheck，待會接收上一個點擊的 checkbox
let lastCheck 

function handleClick(e){
  // 當按著 shift 不放，而且勾選了 checkbox 時
  if(e.shiftKey && this.checked){

    // 建立一個 isBetween 的 switch 標記
    let isBetween = false

    // 遍歷每一個 checkbox
    checkboxes.forEach(checkbox=>{

      // 將兩次點擊的 checkbox 之間的 checkbox 們設定 isBetween 的標記
      if(checkbox === this || checkbox === lastCheck){

        // 如果在兩個點選的 checkbox 之內就標記，否則關閉標記
        isBetween = !isBetween
      }

      // 標記的區間 checkbox，將其 checked 設為 true
      if(isBetween){
        checkbox.checked = true
      }
    })
  }
  // 如果沒有按著 shift 不放，且同時勾選了 checkbox，記下這次的 checkbox
  lastCheck = this
}

參考資料：