10. Hold Shift and Checkboxes

10. Hold Shift and Checkboxes

Javascript30은 바닐라 자바스크립트(Vanila Javascript)로 30일 동안 매일 한 개의 프로젝트를 만들며 기본기를 익히는 챌린지입니다. 이 챌린지를 수행하면서 새로 알게 된 내용을 정리합니다. 참고로 HTML, CSS 소스 코드는 생략될 수 있으니 필요하다면 여기에서 확인하시길 바랍니다.

목표

그림1. Hold Shift and Checkboxes

이번 문제는 체크박스 리스트가 주어지고 먼저 하나의 체크박스를 체크한 다음 shiftKey 와 함께 다른 체크박스를 체크했을 때 그 사이의 체크박스들이 모두 체크되도록 구현하는 것이다.

소스 코드

const checkboxes = document.querySelectorAll( '.inbox input[type="checkbox"]', ); let last; // 직전에 클릭한 체크박스 function checkHandler(e) { isBetween = false; // shift를 누른 상태에서 체크박스를 체크한 경우 if (e.shiftKey && this.checked) { checkboxes.forEach((checkbox) => { // 직전에 클릭한 체크박스(시작)이거나 현재 클릭한 체크박스(종료) if (checkbox === this || checkbox === last) { isBetween = !isBetween; } // 시작부터 종료까지 모두 체크 if (isBetween) { checkbox.checked = true; } }); } last = this; } checkboxes.forEach((checkbox) => { checkbox.addEventListener('click', checkHandler); });

주요 문법 및 포인트

event.shiftKey

이벤트 객체에는 shiftKey 뿐만 아니라 ctrlKey 와 altKey 의 여부를 속성으로 가지고 있다.

구현 실패 ; (

이 문제는 혼자 구현을 시도해봤지만 해결하지 못해서 전적으로 해답에 의지했다. 앞으로 이벤트의 시작과 종료의 사이의 태그에 뭔가를 적용할 때 유용하게 사용할 수 있도록 위 로직을 숙지해놔야겠다.

from http://leo-xee.tistory.com/33 by ccl(A) rewrite - 2021-12-13 15:01:20