Day10: Hold Shift and Check Checkboxes

Copy 
1const checkboxes = document.querySelectorAll(".inbox input[type='checkbox']");
2
3let lastChecked;
4
5function handleCheck(e) {
6  let inBetween = false; // 是否按著 Shift 鍵
7  if (e.shiftKey && this.checked) {
8    //檢查是否有按著 Shift 鍵以及是否被勾選
9    checkboxes.forEach((checkbox) => {
10      console.log(checkbox);
11      // 紀錄首先勾選的核取方塊到最後勾選的核取方塊
12      if (checkbox === this || checkbox === lastChecked) {
13        inBetween = !inBetween; //此時inBetween = true
14        console.log("Starting to check them in between!");
15      }
16
17      if (inBetween) {
18        checkbox.checked = true; //inBetween = true 後進行勾選
19      }
20    });
21  }
22
23  lastChecked = this;
24}
25
26checkboxes.forEach((checkbox) => {
27  checkbox.addEventListener("click", handleCheck);
28});