jquery - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~

대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)

체크박스 전체선택 테스트
	제목	날짜
	제목1	날짜1
	제목2	날짜2
	제목3	날짜3
	제목4	날짜4
	제목5	날짜5
	제목6	날짜6

소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데

그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.

이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;

jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~

별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면

jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 
    <script>
        $(document).ready(function(){
            var tbl = $("#checkboxTestTbl");
             
            // 테이블 헤더에 있는 checkbox 클릭시
            $(":checkbox:first", tbl).click(function(){
                // 클릭한 체크박스가 체크상태인지 체크해제상태인지 판단
                if( $(this).is(":checked") ){
                    $(":checkbox", tbl).attr("checked", "checked");
                }
                else{
                    $(":checkbox", tbl).removeAttr("checked");
                }
 
                // 모든 체크박스에 change 이벤트 발생시키기                
                $(":checkbox", tbl).trigger("change");
            });
             
            // 헤더에 있는 체크박스외 다른 체크박스 클릭시
            $(":checkbox:not(:first)", tbl).click(function(){
                var allCnt = $(":checkbox:not(:first)", tbl).length;
                var checkedCnt = $(":checkbox:not(:first)", tbl).filter(":checked").length;
                 
                // 전체 체크박스 갯수와 현재 체크된 체크박스 갯수를 비교해서 헤더에 있는 체크박스 체크할지 말지 판단
                if( allCnt==checkedCnt ){
                    $(":checkbox:first", tbl).attr("checked", "checked");
                }
                else{
                    $(":checkbox:first", tbl).removeAttr("checked");
                }
            }).change(function(){
                if( $(this).is(":checked") ){
                    // 체크박스의 부모 > 부모 니까 tr 이 되고 tr 에 selected 라는 class 를 추가한다.
                    $(this).parent().parent().addClass("selected");
                }
                else{
                    $(this).parent().parent().removeClass("selected");
                }
            });
        });
    </script>
     
    <style>
        #checkboxTestTbl {border-collapse: collapse;}
        #checkboxTestTbl td, #checkboxTestTbl th{padding:20px;}
        #checkboxTestTbl th{background-color: #ccc;}
         
        #checkboxTestTbl tr.selected{background-color: navy;color: #fff; font-weight: bold;}
    </style>
</head>
 
<body>
    <table id="checkboxTestTbl" border="1px">
        <caption>체크박스 전체선택 테스트</caption>
        <colgroup>
            <col width="40px;"/>
            <col width="200px;"/>
            <col width="100px;"/>
        </colgroup>
        <tr>
            <th><input type="checkbox"/></th>
            <th>제목</th>
            <th>날짜</th>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목1</td>
            <td>날짜1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목2</td>
            <td>날짜2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목3</td>
            <td>날짜3</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목4</td>
            <td>날짜4</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목5</td>
            <td>날짜5</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>제목6</td>
            <td>날짜6</td>
        </tr>
    </table>
</body>
</html>

jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

단축키

Articles