[Jquery] - 제이쿼리 체크박스(checkbox) 전체 선택, 해제 하는 방법

#제이쿼리 체크박스(checkbox) 전체 선택, 해제 하는 방법

 

 

#html

<table>
  <tr>
    <th><input type="checkbox" id="cbx_chkAll"/></th>
    <th>전체 선택</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="typArr"></td>
    <td>체크박스1</td>
  </tr>
   <tr>
    <td><input type="checkbox" name="typArr"></td>
    <td>체크박스2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="typArr"></td>
    <td>체크박스3</td>
  </tr>
</table>

 

 

#js/jquery

<script>

  // 전체 선택 / 해제
  $("#cbx_chkAll").click(function(){
    if($("#cbx_chkAll").is(":checked")){
      $("input[name=typArr]").prop("checked", true);
    }else {
      $("input[name=typArr]").prop("checked", false);
    }
  });
  
  $("input[name=typArr]").click(function(){
    var totalArr = $("input[name=typArr]").length;
    var checked = $("input[name=typArr]:checked").length;
    
    if(totalArr != ckecked){
      $("#cbx_chkAll").prop("checked", false);
    }else{
      $("#cbx_chkAll").prop("checked", true);
    }
  });
  
</script>