js challenge day10

Hold shift to Check Multiple checkbox

 

Code

  <script>
    const checkboxs = document.querySelectorAll('.inbox input[type="checkbox"]');

    let lastCheckBox;

    const handleCheck = (e) => {
      let between = false;
      if (e.shiftKey && e.target.checked) {
        checkboxs.forEach(checkbox => {
          if (checkbox === e.target || checkbox === lastCheckBox) {
            between = !between;
          }
          if (between) {
            checkbox.checked = true;
          }
        })
      }
      lastCheckBox = e.target;
    }
    checkboxs.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
  </script>

배운 점 & 느낀 점

간단히 shift와 check박스의 상태를 확인하여 여러개 체크박스를 동시에 할 수 있는 과제였습니다.

간단한 예제이지만 이렇게 js를 이용해볼 생각은 여태 못해본 것 같습니다.

시야가 좀 넓어지는 과제였습니다.