Day10-Hold Shift and Check Checkboxes

CODE

구현 사항: shift key로 여러 항목을 동시에 체크할 수 있는 체크리스트 구현

1) 변수 checkboxes에 inbox 내의 type이 checkbox인 input을 모두 선택하여 할당

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

2) lastChecked 변수를 함수 바깥에 선언 후 handleCheck() 함수 선언 -> checkboxes에 click 이벤트 발생 시 handleCheck() 함수 실행될 수 있게 함

let lastChecked;

function handleCheck() {}

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

3) 함수 내에서 inBetween 변수 선언 후 false 할당

4) 만약 shift key가 눌린 상태이고, this(<input type="checkbox".>)가 checked 되었으면 (== shift key 누른 상태로 체크박스를 체크한다면) checkboxes 순회하며 현재 클릭한 체크박스이거나 체크박스가 마지막에 체킹되었다면 inbetween을 반대 상태로 변경

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

• forEach 내에서 체크박스들이 위에서부터 하나씩 순회하며 checkbox가 됨 -> 쭉 내려오다가 현재 click 이벤트가 발생한 this이거나, 마지막에 check된 체크박스이면 inBetween을 반대 상태로 변경함

5) 만약 inBetween이 true이면 checkbox를 checked 상태로 변경

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;
      }
    });
  }
}

5) 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;
}

내가 추가한 기능: shift key 누른 채로 체크된 체크박스들 여러 개 동시 체크 해제

1) shift key를 누른 채 클릭 했을 경우, checkbox의 checked 상태를 현재 클릭한 체크박스의 체크 상태와 같게 설정

function handleCheck(e) {
  let inBetween = false;
  if (e.shiftKey) {
    checkboxes.forEach((checkbox) => {
    if (checkbox === this || checkbox === lastChecked) {
      inBetween = !inBetween;
     }
    if (inBetween) {
      checkbox.checked = this.checked;
     }
   });
  }
  lastChecked = this;
}

• shift key를 누른 채 클릭한 체크박스가 체크된 상태였으면 클릭을 통해 체크가 해제되며 this.checked는 false가 됨 -> 사이에 있는 체크박스들도 모두 체크가 해제됨