2023-03-25

자바스크립트로 체크박스 전체 선택/해제하는 여러 사용 예제

자바스크립트를 사용하여 체크박스의 전체 선택 및 해제 기능을 구현하는 방법에 대해서 알아보겠습니다. 이 기능은 웹 페이지에서 여러 개의 체크박스가 있을 때 사용자가 한 번에 모든 체크박스를 선택하거나 해제할 수 있게 합니다.

1. 예제 코드

예제 코드를 실행할 때 하나의 예제 코드를 선택하여 주석을 해제하고 다른 예제 코드는 주석처리하면 됩니다. 이렇게 하면 각 예제를 차례대로 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
     <title>체크박스 전체 선택/해제 예제</title>
</head>
<body>
     <input type="checkbox" id="selectAll"> 모든 항목 선택/해제<br>
     <hr>
     <input type="checkbox" class="checkbox" name="checkbox" id="item1"> 항목 1<br>
     <input type="checkbox" class="checkbox" name="checkbox" id="item2"> 항목 2<br>
     <input type="checkbox" class="checkbox" name="checkbox" id="item3"> 항목 3<br>
     <input type="checkbox" class="checkbox" name="checkbox" id="item4"> 항목 4<br>
     <input type="checkbox" class="checkbox" name="checkbox" id="item5"> 항목 5<br>

     <script>
     const selectAll = document.getElementById('selectAll');
     
     // 예제 1: querySelectorAll 메서드 활용
     /*
     const checkboxes = document.querySelectorAll('.checkbox');

     selectAll.addEventListener('click', () => {
     checkboxes.forEach(checkbox => {
          checkbox.checked = selectAll.checked;
     });
     });
     */

     // 예제 2: getElementsByTagName 메서드 활용
     /*
     const inputElements = document.getElementsByTagName("input");

     selectAll.addEventListener('click', () => {
     for (let i = 0; i < inputElements.length; i++) {
          let inputElement = inputElements[i];
          if (inputElement.type === "checkbox" && inputElement.classList.contains("checkbox")) {
          inputElement.checked = selectAll.checked;
          }
     }
     });
     */

     // 예제 3: getElementsByName 메서드 활용
     /*
     const inputElements = document.getElementsByName("checkbox");

     selectAll.addEventListener('click', () => {
     for (let i = 0; i < inputElements.length; i++) {
          let inputElement = inputElements[i];
          if (inputElement.type === "checkbox") {
          inputElement.checked = selectAll.checked;
          }
     }
     });
     */

     // 예제 4: querySelectorAll 메서드를 사용하여 속성 선택자 활용
     const checkboxes = document.querySelectorAll('input[type="checkbox"].checkbox');

     selectAll.addEventListener('click', () => {
          checkboxes.forEach(checkbox => {
               checkbox.checked = selectAll.checked;
          });
     });

     </script>
</body>
</html>

☞ 이 외에도 다양한 방법으로 체크박스를 선택할 수 있습니다. 이들 방법 중 어떤 것이 가장 적합한지는 상황에 따라 달라질 수 있으므로 필요에 따라 적절한 방법을 선택하시면 됩니다.

2. 실행 결과 화면

체크박스 전체 선택/해제 사용 예제 실행 결과 화면

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.