iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

JavaScript 30天系列 第 10

JS30 - day10: Hold Shift to Check Multiple Checkboxes

https://ithelp.ithome.com.tw/upload/images/20181029/20111164dRsmCdXyIe.png

使用者操作需求

按下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)
});

上一篇
JS30 - day09: 14 Must Know Dev Tools Tricks
下一篇
JS30 - day11: Custom HTML5 Video Player
系列文
JavaScript 30天11

尚未有邦友留言

立即登入留言