[jQuery] checkbox 전체 선택 및 취소

메일이나 어떠한 체크폼을 보다 보면 

전체 선택과 그에따른 하위선택함에 있어 전체 체크 되었다 풀리는 스크립트를 보곤 하는데요

한번 제이쿼리로 만들어 보았습니다.

다른 분들은 이 소스를 참고하여 작업하셧으면 좋겠네요

좋은 방법이나 좋은 예재가 있으면 공유 했으면 합니다.

소스는 다음과 같습니다.

HTML

<!-- wrap -->
<div class="table_wrap" style="width:290px; padding:50px;">
    <table border="0" class="check_board_tb" id="checkBoard">
        <caption></caption>
        <colgroup>
            <col style="width:100px;">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th scope="col"><input type="checkbox"></th>
                <th scope="col">구분</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>사과</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>배</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>귤</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>오렌지</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>수박</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>멜론</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>참외</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- //wrap -->

CSS

.check_board_tb{border-collapse:collapse; width:100%;}
.check_board_tb input{border:1px solid #000; background:#fff; /*-webkit-appearance:none;*/ /*-webkit-appearance:checkbox;*/ /*border-radius:0;*/}
.check_board_tb thead tr th{border:1px solid #999; background:#e1a109; color:#fff;}
.check_board_tb tbody tr td{border:1px solid #999; text-align:center;}

JavaScript

$(function(){
 
    var $checkHead = $("#checkBoard thead th input[type='checkbox']"); // thead에서 체크박스인 input을 찾는다.
    var $checkBody = $("#checkBoard tbody td input[type='checkbox']"); // tbody에서 체크박스인 input을 찾는다.
 
    /* 전체선택 */
    $checkHead.click(function(){
        var $bodyPutCk = $checkHead.is(":checked");
 
        if ( $bodyPutCk == true ) {
            //$lastActive.addClass("active");
            $checkBody.attr("checked", true);
            $checkBody.prop("checked", true);
        }else {
            //$lastActive.removeClass("active");
            $checkBody.attr("checked", false);
            $checkBody.prop("checked", false);
        }
    });
 
    /* 하위 전체 선택시 전체버튼 선택 */
    $checkBody.click(function(){
        var tdInput_Length = $checkBody.length; // td 에 있는 input 갯수
        var tdInput_Check_Length = $("#checkBoard tbody td input[type='checkbox']:checked").length; // td 에 있는 선택된 input 갯수
 
        console.log(tdInput_Length);
        console.log(tdInput_Check_Length);
 
        if ( tdInput_Length == tdInput_Check_Length ) {
            //$checkHead.addClass("active");
            $checkHead.attr("checked", true);
            $checkHead.prop("checked", true);
        }else {
            //$checkHead.removeClass("active");
            $checkHead.attr("checked", false);
            $checkHead.prop("checked", false);
        }
    });
 
})

checkbox 전체 선택 및 취소.zip