使用者操作需求

按下shift + 左鍵 可以圈選多個checkbox

流程步驟

[ 基本設置 ]

1. 使用querySelectorAll('.inbox input[type="checkbox"]') 選擇所有checkbox
2. 並且增加click 事件監聽觸發function handleCheck()
3. 設置變數lastChecked 紀錄點選的checkbox位置

[ handleCheck() ]

1. 設置變數inBetween = false 作為選取區間的判斷
2. 並檢查是否有按著shift if(e.shiftKey && this.checked)
3. 如果有，就循環一次所有checkbox
4. 並且判斷點選的點 if (checkbox == this || checkbox == lastChecked)
   將 inBetween 轉為 true
5. 並判斷 if(inBetween) 執行 checkbox.checked = true 將區間內的checkbox點選起來

範例備註

// 選取所有checkbox
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

// 從這個點開始計算
let lastChecked;

// click觸發
function handleCheck(e) {

// 中間的input
let inBetween = false;

  // 如果有按下shift
  if(e.shiftKey && this.checked) {
    console.log('shiftKey checked');

    // 所有的checkbox 循環一次
    checkboxes.forEach(checkbox => {
      // console.log('checkbox:', checkbox);
      // console.log('lastChecked:', lastChecked);
      // console.log('this:', this);
      
      // 找出中間的input
      if (checkbox == this || checkbox == lastChecked) {
        inBetween = !inBetween;
        console.log('between range-------------------');
      }
      // 區間內的checkbox 勾選起來
      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  lastChecked = this;
}
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('click', handleCheck)
});