[JS30] -10) Hold Shift Check Checkboxes
KeyboardEvent.shiftKey
Shiftkey를 눌렀는지 안 눌렀는지 여부를 판별하기 위해 사용할 수 있는 메소드이다.
처음에 click이벤트와 shift keydown이벤트 두 개를 만들고 있었는데, 중첩해야 하는 부분이 있어 고민했었다. 이 API를 사용하면 정말 간단하게 구현할 수 있다.
const $checkBoxesAll = document.querySelectorAll('input[type="checkbox"]');
const $inbox = document.querySelector('.inbox');
let toBeChecked = false;
$inbox.addEventListener('click', (ev) => {
const target = ev.target;
console.log(this)
if (target.tagName !== 'INPUT') return;
if (ev.shiftKey) {
$checkBoxesAll.forEach((checkBox) => {
if (checkBox.checked === true) {
toBeChecked = !toBeChecked;
}
if (toBeChecked) {
checkBox.checked = true;
}
});
}
});
forEach로 모든 체크박스 element를 순회하면서
클릭했던 체크박스를 기준으로 체크해야 하는 체크박스를 toBeChecked변수로 표시하고, 만약 toBeChecked가 true라면 곧바로 checkd = true로 체크 표시한다.
shiftkey를 누른 상태에서 체크박스를 클릭하면 toBeChecked가 false가 된다.
강의 자료에서는 checkbox를 모두 선택한 뒤 클릭 이벤트를 등록한 다음, this값을 주었다.
Reference
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey
Author And Source
이 문제에 관하여([JS30] -10) Hold Shift Check Checkboxes), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/JS30-10-Hold-Shift-Check-Checkboxes저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)