Wesbos - Hold Shift Button to Check

---

정말 자주 쓰일 것 같은 기능이다. 첫 번째 체크박스를 클릭하고 쉬프트를 누른 뒤
아래에 있는 임의의 박스를 클릭하면 그 사이에 있는 체크박스들이 함께 체크된다.

네이버에서도 사용!

---

로직

1. 체크박스를 변수화해 지정한다. (const)
2. click 이벤트를 위한 addEventListener + 함수 생성
3. lastChecked와 inBetween을 선언하여 플래그값으로 활용 ⭐️

---

체크박스 지정하기

💡 거의 가장 먼저 하는 것은 const를 통해 사용할 객체를 변수화 하는 것이다.

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

---

addEventListener + 함수 생성

💡 여기서 사용할 것은 click 이벤트다.
이 챕터를 진행하기 전이었다면, keyCode를 활용해 keydown등의 이벤트를 사용했을텐데…
‘e.shiftKey’를 사용할 수 있더라 0_0;

// 이벤트리스너
checkBoxes.forEach((checkbox) => checkbox.addEventListener('click', checkIt));

//함수 생성
function checkIt(e) {}

---

플래그 활용

다른 것들은 어렵지 않은데…. 이 부분이 참 생소하고 어려웠다 ㅜㅜ

lastChecked

💡 제일 최초로 체크된 박스를 저장하기 위한 플래그다.

// Boolean값 없이 선언만 해준다
let lastChecked;

inBetween

💡 최초 체크박스와 쉬프트를 누른채 클릭한 체크박스 사이에 있는 박스들을 인식하기 위한 플래그!

function checkIt(e) {
  //사이에 있는 놈인가? false
  let inBetween = false;
  //만약 쉬프트키가 눌려져 있고, 현재 체크 박스가 체크됐다면?
  if (e.shiftKey && this.checked) {
    checkBoxes.forEach((checkbox) => {
      // 방금 눌린 것 or 최초로 눌린 것 = inBetween 아님!
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }
      // inBetween이면 checked되게 하라
      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  // 처음 눌린 놈!
  lastChecked = this;
}

---

최종 완성 코드

const checkBoxes = document.querySelectorAll('.inbox input[type="checkbox"]');
//lastChecked 변수를 부여
let lastChecked;

function checkIt(e) {
  //사이에 있는가? => 일단 false
  let inBetween = false;
  //여기서 e는 click 이벤트다, 그리고 this는 <input type="checkbox">임!!
  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', checkIt));

---