[筆記]JavaScript30學習-Day10

2020.10.22

學習網站：javascript30

僅記錄JS及較複雜的CSS部分，若有不清楚或是歡迎留言討論，
謝謝(´｡• ω •｡`)

Hold Shift to Check Multiple Checkboxes

Step 1. 選取所有 input並新增addEventListener

const checkboxes = 
      document.querySelectorAll('.inbox input[type="checkbox"]');
checkboxes.forEach(checkbox => 
      checkbox.addEventListener('click', handleCheck));

Step 2. 觸發的程式：點選後，記錄該被勾選的元件

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
    lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

Step 3. 判斷

使用 inBetween = false;當作判斷依據

在 按下shift且已勾選的物件 的條件下，進入每個勾選物件的迴圈判斷是否符合在二個勾選物件之間，若符合則修改 inBetween狀態，已觸發下方勾選條件。

const checkboxes = 
      document.querySelectorAll('.inbox input[type="checkbox"]');
        let lastChecked;
        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;
        }
        checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

💫延伸資料：

• CSS 陰影效果的比較：Drop-Shadow 與 Box-Shadow 簡單究好 Simple is Best ─如果圖片為透明元件，想要沿著圖案產生陰影可使用 Drop-Shadow
• The “Checkbox Hack” (and things you can do with it) | CSS-Tricks ─使用CSS修改勾選後的顯示狀態
• CSS text-decoration — Wibibi ─font設定