WEB 웹/JAVASCRIPT
Hold Shift to Check Multiple Checkboxes (javascript30 - 10)
KIMSG
2017. 11. 22. 15:41
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>
|
우선, checkbox들을 querySelectorAll을 이용해서 checkboxes에 담는다.
checkboxes에 click을 할 떄 handleCheck이벤트를 담는다.
shiftkey : 쉬프트키의 누름 여부를 알려준다.
처음 쉬프트키를 누르고 선택한 값과 두번째 선택한 값들의 중간 값들을 반환한다.