[jQuery] 체크박스 > 전체체크 박스 만들기

생각보다 자주 사용되던 전체체크박스 이벤트

할때마다 스크립트가 계속 바뀌었지만, 하나로 통일해서 쓰면 좋지 않을 까 해서 기록하기!

 

<div class="all-chk-wrap">
  <div class="check-box">
    <input type="checkbox" id="chkAll" name="check">
    <label for="chkAll" class="label-info">전체체크</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="chk_1" name="checkItem">
    <label for="chk_1" class="label-info">체크박스1</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="chk_2" name="checkItem">
    <label for="chk_2" class="label-info">체크박스2</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="chk_3" name="checkItem">
    <label for="chk_3" class="label-info">체크박스3</label>
  </div>
</div>

 

우선 html 구조 짜주기

체크박스같은 경우는 디자인을 입히는 경우가 많고 클릭 영역을 넓히기 위해 label태그를 같이 써준다.

 

$("#chkAll").click(function(){
  if($(this).is(":checked")){
    $("input[name=checkItem]").prop("checked",true);
  }else{
    $("input[name=checkItem]").prop("checked",false);
  }
})

$("input[name=checkItem]").click(function(){
  var total = $("input[name=checkItem]").length;
  var checked = $("input[name=checkItem]:checked").length;
  
  if(total != checked){
    $("#chkAll").prop("checked",false);
  }else{
      $("#chkAll").prop("checked",true);  
  }
})

그리고 jquery 소스

 

1. 전체체크박스에 해당하는 체크박스를 클릭 시, 체크되어있는 지 판단하는 구문

2. 전체체크박스가 아닌 목록 체크박스 클릭 시, 전체 갯수와 체크되어있는 갯수를 구한다.

3. 전체체크된 갯수와 목록 전체갯수가 같을 시 전체 체크박스 checked!! 아니면 체크박스 풀어주기!

 

생각보다 간단하지만, 할때마다 괜히 더 복잡하게 짜는 경우도 생긴다.

* 전체체크 되어있는데 목록 중 하나라도 체크박스 풀면 전체체크박스도 풀어줘야한다는 점!!