[JS30] Day10: Hold Shift to Check Multiple Checkboxes

JavaScript

透過屬性選擇器選到 checkboxes

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

lastChecked 變數紀錄上次勾選到的 input。先設定一個 inBetween 的否定值。在 handleCheck 的函式中，如果 shift 鍵和 this 元素是被勾選(點擊 input)的話，每個 checkboxes 會跑過一個函式，如果是勾選到的或是上次勾選到的元素，isBetween 就會變成相反的值。

舉個例子，我們碰到第一個先前勾選的元素(儲存進 lastChecked)，isBetween 會變為真，然後勾選這個元素，一直往下走到我們 shift 鍵壓的元素，都會被勾選，而在之後的元素因為 isBetween 變為否，就不會繼續被勾選。

function handleCheck(e) {
  let inBetween = false;
  if (e.shiftKey && this.checked) {
    checkboxes.forEach((checkbox) => {
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }
      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  lastChecked = this;
}

在每個 checkbox 都裝上 click 的監聽器去呼叫 handleCheck 函式

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener("click", handleCheck);
});

JavaScript​

JavaScript