10 - Hold Shift and Check Checkboxes (Javascript 30)

이번에는 쉬프트 키를 이용해 박스를 동시에 체크할 수 있는 기능을 구현하는 파트입니다.

 

프로세스 자체는 매우 간단합니다.

1) 체크박스를 하나 체크상태로 만든다. (이때 마지막으로 체크한 체크박스를 기록하고 있어야합니다)

2) 다른 체크박스를 쉬프트를 누른채 클릭한다.

3) 마지막에 체크한 체크박스로부터 지금 클릭한 체크박스까지 전부 체크상태로 변경한다.

 

그럼 코드작성을 시작해보겠습니다.

 

1. 먼저 아래와 같이 코드를 작성해보겠습니다.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"');
let lastChecked;  // 마지막에 클릭한 checkbox를 기록하는 변수

function handleCheck(e) {
	console.log(e.target)
}

checkboxes.forEach((checkbox) => checkbox.addEventListener('click', handleCheck));  // 체크박스들에 이벤트 클릭 등록

이제 체크박스를 클릭하면 어떤 체크박스를 클릭했는지를 알 수 있습니다.

 

2. 사이에 있는 값인지 아닌지를 판단하고 변경하는 코드.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"');
let lastChecked;  // 마지막에 클릭한 checkbox를 기록하는 변수

function handleCheck(e) {
	let inBetween = false;  // lastChecked와 지근 현재 클릭한 element 사이에 있는지.
	if (e.shiftKey && this.checked) {  // 쉬프트키를 누른채 체크가 되었는지 확인
	  checkboxes.forEach(checkbox => {
		if (checkbox === this || checkbox === lastChecked) {  // 사이에 있는 값인지 판단하여 변경하는 부분.
		  inBetween = !inBetween;
		}

		if (inBetween) {
		  checkbox.checked = true;  // 실질적으로 checked 상태를 변경하는 부분.
		}
	  });
	}

	lastChecked = this;
}

checkboxes.forEach((checkbox) => checkbox.addEventListener('click', handleCheck));  // 체크박스들에 이벤트 클릭 등록

만약 중간에 체크박스가 되어있는데 해제하고 싶으시다면 if (inBetween) 이 부분에서 조건을 추가하시고 checkbox.checked = !checkbox.checked 이런식으로 변경하시면 됩니다.