티스토리 뷰

Javascript

Javascript와 JQuery로 체크박스 전체선택해제 하기

travelpark 2023. 6. 20. 00:02
반응형

웹에서 게시판을 개발하다보면 필수로 사용하는 기능 중에 하나가 체크박스 전체선택해제하는 기능입니다. 

간단한 예제를 통해 전체선택해제에 대해 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>전체선택 예제</title>
  <style>
    table {
      border-collapse: collapse;
      width: 30%;
    }

    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #f2f2f2;
    }

    tr:hover {
      background-color: #f5f5f5;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
    }

    .checkbox-label input[type="checkbox"] {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>
          <label class="checkbox-label">
            <input type="checkbox" id="selectAll">
            Select All
          </label>
        </th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected" id="selected_1"></td>
        <td>John</td>
        <td>30</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected" id="selected_2"></td>
        <td>Jane</td>
        <td>25</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected" id="selected_3"></td>
        <td>Michael</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>
          <label class="checkbox-label">
            <input type="checkbox" id="selectAll1">
            전체 선택
          </label>
        </th>
        <th>이름</th>
        <th>나이</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected1" id="selected1_1"></td>
        <td>존</td>
        <td>30</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected1" id="selected1_2"></td>
        <td>제인</td>
        <td>25</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox" name="selected1" id="selected1_3"></td>
        <td>마이클</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 전체 선택 체크박스 요소 가져오기
    const selectAllCheckbox = document.getElementById('selectAll');
    
    // 체크박스 그룹 요소 가져오기
    const checkboxes = document.querySelectorAll('input[name="selected"]');
    
    // 전체 선택 체크박스의 변경 이벤트 리스너 추가
    selectAllCheckbox.addEventListener('change', function() {
      // 체크박스 그룹의 체크 상태를 전체 선택 체크박스와 동일하게 설정
      checkboxes.forEach(function(checkbox) {
        checkbox.checked = selectAllCheckbox.checked;
      });
    });
	
    //jquery 전체선택
    $(document).ready(function() {
      // 전체 선택 체크박스의 변경 이벤트 핸들러
      $('#selectAll1').change(function() {
        // 체크박스 그룹의 체크 상태를 전체 선택 체크박스와 동일하게 설정
        $('input[name="selected1"]').prop('checked', $(this).prop('checked'));
      });
    });
  </script>
</body>
</html>

동일한 테이블 두개를 가지고 Javascript와 JQuery로 체크박스 전체선택해제를 하는 예제입니다. 둘 다 동일하게 전체선택 체크박스의 id 값을 이용해 동일한 name 값을 가진 체크박스들을 전체선택하거나 해제할 수 있는 예제를 만들었습니다.

 

여러분 취향껏 Javascript와 JQuery 예제 중 하나를 선택해서 응용해 사용해보시기 바랍니다.

반응형

'Javascript' 카테고리의 다른 글

Javascript와 JQuery에서 엔터키 값 체크하기  (0) 2023.06.28
Javascript와 JQuery로 체크박스 선택된 값 가져오기  (0) 2023.06.14
Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함