[JS30]DAY10 : Hold Shift to Check Multiple Checkboxes

第 11 屆 iThome 鐵人賽

DAY 11

Modern Web

JS煉金術：Javascript30+聲光玩轉的Drum Pads系列第 11 篇

11th鐵人賽 javascript

BROWN

2019-09-25 23:01:48

505 瀏覽

分享至

[程式碼&DEMO] [HackMD完整筆記]

目標

初始是一個checkbox,改成使用Shift +左鍵來進行連續區間選取。

步驟流程

STEP1
用querySelectorAll把HTML中的checkbox選起來。
設置一個變數lastChecked，當作稍後勾選位置的紀錄使用。

STEP2
用forEach把每個選取的checkboxes，進行addEventListener。

STEP3 function handleCheck(e)
在這個function裡，建立了一個區域變數來當作選取區間的標記。
每次觸發時檢查有無按著shift點擊。
有：再跑一次forEach來透過inBetween對每個checkbox進行區間標記，屬於區間內的checkbox勾起來，並記錄此次點擊的位置。