Hold Shift to Check Multiple Checkboxes

實作按著Shift鍵時將中間範圍的check選項全部選取

1. 透過querySelectorAll將所有input type=check的element選取

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

2. 監聽每個checkbox的點擊事件

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

3. 每次點擊時都要儲存上次被點擊的input，透過element的checked屬性得知選項是否被點選，當點擊與shift同時觸發，將所有checkbox遍歷一次，將上次點擊的與這次checkbox之間的所有選項打勾

   function markUnmark(e) {
      if (event.shiftKey && this.checked) {
        // Shift 鍵被按下
        let isChecking = false;
        checkboxes.forEach((checkbox) => {
          if (checkbox === lastChecked) {
            isChecking = true;
          }
   
          if (checkbox === this) {
            isChecking = false;
          }
          if (isChecking) {
            checkbox.checked = true
          }
   
        });
   
      }
      lastChecked = this
    }
   

知識點

• input type為checkbox的element中可以透過checked屬性來判別是不是被勾選
• Event中的shiftkey屬性可以得知Shift是否被按