# JS30 Day10 ## Hold Shift to Check Multiple Checkboxes ###### tags: `JS 30` by Angelina --- 主要做出：用shift 一次選取多個 checkbox 的功能 --- 先來看一個光溜溜的 checkbox ---  --- 點擊 checkbox ---  --- 點擊 checkbox + shift 鍵 ---  --- 首先 --- 1 選到每一個 checkbox 加入監聽 click 事件 GO ٩(๑❛ᴗ❛๑)۶ --- ```javascript= const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]') // console.log(checkboxes) checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)) ``` --- 2 當任何一個 checkbox 被點擊到 就執行 handleCheck --- 製作 handleCheck function GO (;｀O´)o --- ```javascript= const checkboxes = document.querySelectorAll('.inbox input[type=checkbox]') checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)) function handleCheck(e) { // console.log(e) } ``` --- 3 紀錄上一個點擊的 checkbox 偵測同時點擊 shift + checked GO (ᗒᗣᗕ)՞ --- ```javascript= const checkboxes = document.querySelectorAll('.inbox input[type=checkbox]') checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)) let lastChecked function handleCheck(e) { // console.log(lastChecked) if(e.shiftKey && this.checked) { // console.log(true) } lastChecked = this } ``` --- 4 事件發生時都要跑一次迴圈，從第一個 checkbox 到最後一個 判斷每一個是不是在該打勾的之間 * 1 => no * 2 => no * 3 => start * 4 => checked * 5 => checked * 6 => end * 7 => no * 8 => no --- 宣告變數 inBetween = false 判斷是不是在要打勾的區間內 GO ʕ •̀ o •́ ʔ --- ```javascript= const checkboxes = document.querySelectorAll('.inbox input[type=checkbox]') checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)) let lastChecked function handleCheck(e) { let inBetween = false if(e.shiftKey && this.checked) { checkboxes.forEach(checkbox => { // console.log(checkbox) }) } lastChecked = this } ``` --- 加入條件判斷 GO (๑¯◡¯๑) --- ```javascript= const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]') checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)) let lastChecked function handleCheck(e) { let inBetween = false if (e.shiftKey && this.checked) { checkboxes.forEach(checkbox => { console.log(checkbox); if (checkbox === this || checkbox === lastChecked) { inBetween = !inBetween console.log('STarting to check them inbetween!') } if (inBetween) { checkbox.checked = true } }) } lastChecked = this } ``` --- Done! --- [網友解法](https://guahsu.io/2017/07/JavaScript30-10-Hold-Shift-and-Check-Checkboxes/) [網友解法](https://stevenjhu.com/2020/03/21/js%E4%BD%9C%E5%93%81js30%E7%B3%BB%E5%88%9710-hold-shift-and-check-checkboxes-%E9%81%B8%E5%96%AE%E5%A4%9A%E9%87%8D%E9%81%B8%E5%8F%96%E5%8A%9F%E8%83%BD/) [網友解法](https://shunnien.github.io/2017/12/27/Javascript30days-10/) --- * KeyboardEvent.shiftKey [MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey)