본문 바로가기
챌린지/JavaScript 30일 챌린지

[JavaScript 30일 챌린지] : 10일차

by 오주현 2022. 2. 6.
반응형

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

  let lastChecked;

  function handleCheck(e) {
    let inBetween = false;
    if (e.shiftKey && this.checked) {
      checkboxes.forEach(checkboxes => {
        console.log(checkbox);
        if (checkbox === this || checkbox === lastChecked) {
          inBetween = !inBetween;
          console.log('Starting to check them in between!');
        }

        if (inBetween) {
          checkbox.checked = true;
        }
      });
    }

    lastChecked = this;
  }

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

체크 박스를 만들어서 체크가 되면 선이 그어지도록 만들었다.

 

이런식으로 작동하게 된다.

반응형

댓글