Hold Shift to Check Multiple Checkboxes (javascript30 - 10)

shift키를 눌러서 checkbox 연속 선택하기 https://github.com/KIMSG/javascript30/blob/master/day10/index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script>     const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');       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;                }                if(inBetween){                    checkbox.checked = true;                }             });         }         lastChecked = this;     }     checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck)); </script> Colored by Color Scripter

cs

우선, checkbox들을 querySelectorAll을 이용해서 checkboxes에 담는다. 

checkboxes에 click을 할 떄 handleCheck이벤트를 담는다.

shiftkey : 쉬프트키의 누름 여부를 알려준다.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey

처음 쉬프트키를 누르고 선택한 값과 두번째 선택한 값들의 중간 값들을 반환한다.