[JavaScript] 10. Hold Shift to check the box

amgona94·2022년 3월 2일
0
post-thumbnail

💡 SHIFT 키와 같이 클릭하여 한번에 여러 개의 체크박스를 모두 체크하는 기능을 구현해보자!

로직

  1. 임의의 체크박스를 클릭하여 체크한 후 그 박스를 기억한다.
  2. SHIFT 키와 같이 클릭한 것 인식하게 하기
  3. 체크박스를 SHIFT 키와 같이 클릭할 경우 그 체크박스와 기억해둔 가장 최근의 체크박스 사이의 모든 체크박스 체크하기

코딩 과정

1. 최근 체크 박스 기억하기

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  lastChecked = this;
}

checkboxes.forEach((checkbox) =>
  checkbox.addEventListener("click", handleCheck)
);

핸들러를 생성하기에 앞서 미리 lastChecked 변수를 선언해주고
체크박스를 클릭할 때마다 lastChecked 값을 해당 체크박스로 업데이트 시켜준다.

2. SHIFT 키 인식하기

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  if (e.shiftKey && this.checked) {
    console.log("쉬프트 키 눌림!");
  }
  lastChecked = this;
}

checkboxes.forEach((checkbox) =>
  checkbox.addEventListener("click", handleCheck)
);

event.shiftKey

마우스이벤트, 키보드이벤트 발생 시 SHIFT 키가 눌렸는지 여부를 Boolean 값으로 반환해준다.
SHIFT 키와 마찬가지로 event.altKey, event.ctrlKey 또한 존재한다.

3. 두 체크박스 사이의 체크박스들 동시 체크

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  let inBetween = false;

  if (e.shiftKey && this.checked) {
    checkboxes.forEach((checkbox) => {
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }
      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  lastChecked = this;
}

checkboxes.forEach((checkbox) =>
  checkbox.addEventListener("click", handleCheck)
);

먼저 각 체크박스들이 사이에 있는 체크박스인지에 대한 여부를 Boolean 값으로 판단하기 위해 inBetween 변수를 선언해 준다.

그 후 만약 SHIFT 키와 같이 클릭이 되면 forEach 메서드로 모든 체크박스에 대하여 다음 두 가지를 검사한다.

  1. 만약 체크박스가 this(이벤트가 발생한 체크박스)거나 lastChecked(최근에 누른 체크박스)이면 inBetween 값을 반대로 설정
  2. 만약 inBetween 값이 true면 체크박스를 체크 후 다음 체크박스 검사

위 코드에 의해 다음과 같은 과정으로 이벤트가 발생한다.

  1. 임의의 체크박스 클릭 ⇒ lastChecked 업데이트 & inBetween 값으로 false 할당
  2. 또 다른 체크박스를 SHIFT 키와 함께 클릭
    forEach 메서드로 모든 체크박스 검사 시작
    this거나 lastChecked인 체크박스가 나오기 전까진 inBetween 값이 false이므로 아무 변경 사항 없이 다음 차례로 넘어감
    this거나 lastChecked인 체크박스가 나오면 inBetween 값이 true로 바뀜
    ⇒ 다음 차례부턴 inBetween 값이 true이므로 체크박스를 체크 후 다음 차례로 넘어감
    thislastChecked중 나머지 체크박스가 나오면 inBetween 값이 다시 false로 바뀌면서 이후 차례의 체크박스들은 다시 아무 변경 사항 X

최종 완성 코드

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  let inBetween = false;

  if (e.shiftKey && this.checked) {
    checkboxes.forEach((checkbox) => {
      if (checkbox === this || checkbox === lastChecked) inBetween = !inBetween;
      if (inBetween) checkbox.checked = true;
    });
  }
  lastChecked = this;
}

checkboxes.forEach((checkbox) =>
  checkbox.addEventListener("click", handleCheck)
);
profile
프론트엔드 개발자

0개의 댓글