📂프로그래밍

자바스크립트 쉬프트 클릭으로 연속된 체크박스 선택, 해제, 반전 시키는 예제

쇼케이스

위 체크박스를 선택한 상태에서 쉬프트를 누르고 다른 체크박스를 클릭하면, 두 체크박스 사이의 모든 체크박스가 선택되거나 해제된다. 이 기능은 많은 수의 체크박스를 다룰 때 유용하며, 특히 글목록이나 파일목록처럼 언뜻 체크박스처럼 느끼지 않는 경우에도 요긴하게 쓰이고 있다.

코드

HTML

<div align="center" style="user-select: none;">

<input type="checkbox" id="A"><label for="A">A</label>
<input type="checkbox" id="B"><label for="B">B</label>
<input type="checkbox" id="C"><label for="C">C</label>
<input type="checkbox" id="D"><label for="D">D</label>
<input type="checkbox" id="E"><label for="E">E</label>
<input type="checkbox" id="F"><label for="F">F</label>
<input type="checkbox" id="G"><label for="G">G</label>
<input type="checkbox" id="H"><label for="H">H</label>
<input type="checkbox" id="I"><label for="I">I</label>
<input type="checkbox" id="J"><label for="J">J</label>

</div>

javascript

<script>
let firstChecked = null;
let secondChecked = null;

document.querySelectorAll("input[type='checkbox']").forEach((checkbox) => {
  checkbox.addEventListener("click", function (event) {
    if (!firstChecked) {
      firstChecked = event.target;
      console.log("첫 번째 클릭:", firstChecked.id);
    } else if (event.shiftKey) {
      secondChecked = event.target;
      console.log("두 번째 클릭:", secondChecked.id);

      let checkboxes = document.querySelectorAll("input[type='checkbox']");
      let start = [...checkboxes].indexOf(firstChecked);
      let end = [...checkboxes].indexOf(secondChecked);

      checkboxes.forEach((cb, index) => {
        if (index > Math.min(start, end) && index < Math.max(start, end)) {
          cb.checked = !cb.checked;
        }
      });

      setTimeout(() => {
        firstChecked = null;
        secondChecked = null;
      }, 100);
    } else {
      firstChecked = event.target;
      secondChecked = null;
    }
  });
});
</script>