[jQuery] 체크박스 전체선택, checkbox allCheckedBtn 사용법

 

 

게시판에 관리자는 전체선택 기능이 있는 경우가 아주 많은데

전체선택 클릭 시 (제일 상단에 있는 체크박스) 모두 체크되며 하나라도 체크 해제하면 전체선택 체크박스도 체크 해제됩니다.

편의상 게시판 모양으로 table 퍼블리싱 하였고 클래스명, 아이디명만 같다면 다른 레이아웃에 적용 하셔도 됩니다.

HTML

  <table class="adm-sub-table">
    <thead>
      <col style="width:66px">
      <col style="width:64px">
      <col style="width:calc(100% - 202px)">
      <col style="width:72px">
    </thead>
    <tbody>
      <tr>
        <th class="tb_check">
          <input type="checkbox" class="all-checked-btn" id="allCheckedBtn">
        </th>
        <th class="tb_no">
          No.
        </th>
        <th class="tb_subject">
          제목
        </th>
        <th class="tb_more">
          View
        </th>
      </tr>
      <tr>
        <td class="tb_check">
          <input type="checkbox" class="tb-checked-btn" id="tb-checked-btn15">
        </td>
        <td class="tb_no">
          15
        </td>
        <td class="tb_subject">
          제목입니다55
        </td>
        <td class="td_more">
          5
        </td>
      </tr>
      <tr>
        <td class="tb_check">
          <input type="checkbox" class="tb-checked-btn" id="tb-checked-btn14">
        </td>
        <td class="tb_no">
          14
        </td>
        <td class="tb_subject">
          제목입니다
        </td>
        <td class="td_more">
         4
        </td>
      </tr>
      <tr>
        <td class="tb_check">
          <input type="checkbox" class="tb-checked-btn" id="tb-checked-btn13">
        </td>
        <td class="tb_no">
          13
        </td>
        <td class="tb_subject">
            제목입니다2
        </td>
        <td class="td_more">
          3
        </td>
      </tr>
    </tbody>
  </table>

 

 

Script

  <script>
  $(document).ready(function() {
    if("#allCheckedBtn"){
      $('#allCheckedBtn').on('change', function() {
      $('.tb-checked-btn').prop('checked', this.checked);
      });
      
      $('.tb-checked-btn').on('change', function() {
        if ($('.tb-checked-btn:checked').length === $('.tb-checked-btn').length) {
          $('#allCheckedBtn').prop('checked', true);
        } else if (!$('.tb-checked-btn:checked').length <= 1) {
          $('#allCheckedBtn').prop('checked', false);
        } 
      });
    }
    // 게시판 전체선택
  });
  </script>

 

CSS(외관만 수정했습니다. 없어도 기능 작동합니다.)

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
}

.adm-sub-table{
  width: 100%;
  max-width: 767px;
  margin: 0 auto;
  position: relative;
  border: 1px solid #ddd;
}
.adm-sub-table tr th,
.adm-sub-table tr td
{
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}