10 - Hold Shift and Check Checkboxes

tags: JavaScript30

專案簡介

第十天的目標是在學習使用 shift 幫待辦清單達成批量選取的功能

課程影片：JS30 10
導讀影片：Alex

初始文件

Github 檔案位置：10 - Hold Shift and Check Checkboxes

網頁一開始的樣子如下，選取後會幫文字加上刪除線，但不能用 shift 批量加上刪除線

可以先去看看 最後的成品

正式製作

流程

將程式的要求拆分步驟後，我們需要做的事情如下

1. 為 checkbox 加上監聽
2. 偵測 shift 是否被按下以及觸發事件後 checkbox 是否為真
3. 以變數紀錄被批量選取區間的開關

為 checkbox 加上監聽

加上監聽事件的過程之前學過就不再贅述

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

function handleCheck(e){
    console.log(e);
}

checkboxs.forEach(checkbox => 
    checkbox.addEventListener('click', handleCheck) // addEventListener 在 functions 加上 () 會找不到函式
);

偵測 shift 是否被按下以及觸發事件後 checkbox 是否為真

我們的首要目標是找到偵測 shift 和 checkbox 被案下的變數
console.log(e); 拉開來看的話會找到

然後是 checkbox，如果用 console.log(this) 會發現沒有什麼資訊

所以我們可以用昨天學ㄉ console.dir()！然後資訊量超多。

認真找的話會發現我們要用到的變數

• checked
  

再加上我們要的判斷式就好

function handleCheck(e){
  console.log(e);
  // console.log(this);
  // console.dir(this);

  if(e.shiftKey === true && this.checked === true){ // 後者為確定是勾選而不是取消
    
  }
}

以變數紀錄被批量選取區間的開關

在這邊我們使用 lastCheckbox 紀錄上次被選取的 checkbox，

偵測 shift 和 this.checked 條件後，利用 forEach 跑過所有的
checkbox，當首次遇到 lastCheckbox 或目前選取的 checkbox 就將此當為起點，直到再次遇到上述兩者前的 checkbox 都設為真

以此邏輯即可完成專案需求的 shift 按下後批量勾選

let lastCheckbox
function handleCheck(e){
  let isBetween = false;

  if(e.shiftKey === true && this.checked === true){
    checkboxs.forEach(checkbox => {
      if(checkbox === lastCheckbox || checkbox === this){
        isBetween = !isBetween // 做區間開關
      }
      if(isBetween === true) checkbox.checked = true; // 區間內的自己選取
    });
  }
  lastCheckbox = this;
}

最後程式碼

const checkboxs = document.querySelectorAll('.inbox input[type="checkbox"]');
console.log(checkboxs);
let lastCheckbox;

function handleCheck(e){
  console.log(e);
  console.log(this);
  console.dir(this);
  let isBetween = false;

  if(e.shiftKey === true && this.checked === true){ // 後者為確定是勾選而不是取消
    checkboxs.forEach(checkbox => {
      if(checkbox === lastCheckbox || checkbox === this){
        isBetween = !isBetween // 做區間開關
      }
      if(isBetween === true) checkbox.checked = true; // 區間內的自己選取
    });
  }
  lastCheckbox = this;
}


checkboxs.forEach(checkbox => 
  checkbox.addEventListener('click', handleCheck) // addEventListener 在 functions 加上 () 會找不到函式
);

完成結果圖

最後的成品

結語

以上是第十天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JS Checkbox Challenge! #JavaScript30 10/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 10：Hold Shift and Check Checkboxes