[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