[JQuery] checkbox 전체선택/전체해제 이벤트 주기

화면 목록에서 체크박스 기능을 구현해야한다면 전체선택/전체해제 기능이 필요할 것입니다.

우선, 아래와 같이 html로 table을 그려줍니다.

헤더부분에 전체 선택/해제 할 수 있도록 checkbox를 하나 만들어줍니다.

<table>
    <thead>
      <tr>
        <th></th>
        <th><input type="checkbox" id="memberAllChk" /></th>
        <th>아이디</th>
        <th>이름</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <th><input type="checkbox" class="memberChk" /></th>
            <th>gildong1</th>
            <th>홍길동</th>
        </tr>
        <tr>
            <th></th>
            <th><input type="checkbox" class="memberChk" /></th>
            <th>gilsun</th>
            <th>홍길순</th>
        </tr>
        <tr>
            <th></th>
            <th><input type="checkbox" class="memberChk" /></th>
            <th>gil2</th>
            <th>홍길이</th>
        </tr>
    </tbody>
</table>

 

$("#memberAllChk").change(function(){
    if($("#memberAllChk").is(":checked")){
        $(".memberChk").prop("checked", true);
    }else{
        $(".memberChk").prop("checked", false);
    }
});

테이블 헤더의 memberAllChk 를 선택할때 마다 memberChk의 클래스가 전부 선택되거나 취소되어야합니다.

$(".memberChk").click(function(){
    var total = $(".memberChk").length;
    var checked = $(".memberChk:checked").length;

    if(total != checked){
        $("#memberAllChk").prop("checked", false);
    }else{
        $("#memberAllChk").prop("checked", true); 
    }
});

그리고 memberChk를 하나씩 선택하여 전체선택이 된 경우에는 memberAllChk 가 선택되어야 합니다.

---

결과)

		아이디	이름
		gildong1	홍길동
		gilsun	홍길순
		gil2	홍길이