「JavaScript 30」學習筆記（十）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

在按住 Shift 鍵的情況下對核取方塊進行多個勾選。

筆記

首先取得所有的核取方塊元素。

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

---

設定一個 handleCheck() 方法，以處理選取核取方塊時的行為。

function handleCheck(e) {
    let inBetween = false; // 用來標記是否按著 Shift 鍵

    // 檢查是否按著 Shift 鍵以及當前選取的核取方塊是否被勾選
    if (e.shiftKey && this.checked) {
        checkboxes.forEach(checkbox => {
            // 紀錄首先勾選的核取方塊到最後勾選的核取方塊
            if (checkbox === this || checkbox === lastChecked) {
                inBetween = !inBetween; // 將標記改為 `true`
            }

            // 將 `inBetween` 為 `true` 的核取方塊進行勾選
            if (inBetween) {
                checkbox.checked = true;
            }
        })
    }

    lastChecked = this; // 指向當前選取的核取方塊的元素
}

• checked 屬性設置或返回核取方塊是否應被選中。

---

監聽每一個核取方塊，在 click 行為時觸發 handleCheck() 方法。

let lastChecked;

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