메뉴 건너뛰기

조회 수 1085 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
많이들 보는 형태의 테이블이다. 각 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>


  1. jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

    Date2019.01.10 Views1211
    Read More
  2. jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

    Date2019.01.10 Views1085
    Read More
  3. jQuery 로 원하는 갯수만큼 checkbox 선택하기

    Date2019.01.10 Views1022
    Read More
  4. jQuery 로 탭메뉴 보였다 안보였다 맹글기

    Date2019.01.10 Views1329
    Read More
  5. jQuery 로 탭메뉴

    Date2019.01.10 Views938
    Read More
  6. 스크롤 최하단 자동 포커스(auto scroll to bottom of page with jquery)

    Date2018.11.07 Views1571
    Read More
  7. jquery timer, javascript countdown (타이머 예제)

    Date2018.11.07 Views81444
    Read More
  8. Hide pager if bxslider has only 1 slide

    Date2018.11.07 Views1296
    Read More
  9. Magnific popup conflict with "jquery.nicescroll"

    Date2018.11.07 Views1315
    Read More
  10. 터치 디바이스 분기처리

    Date2018.11.07 Views1278
    Read More
  11. 중복 없는 랜덤

    Date2018.11.07 Views2017
    Read More
  12. 3D Perspective Carousel with jQuery and CSS3 - CSSSlider

    Date2018.11.07 Views1388
    Read More
  13. iframe height auto resize

    Date2018.11.07 Views1401
    Read More
  14. getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드

    Date2018.11.07 Views1297
    Read More
  15. 비활성화 된 라디오버튼 클릭 시 경고창 생성

    Date2018.11.07 Views1396
    Read More
  16. 특정영역 제외하고 body 클릭

    Date2018.09.28 Views3610
    Read More
  17. 따욤표 중복으로 출력하기

    Date2018.09.28 Views1884
    Read More
  18. [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기

    Date2018.09.27 Views2553
    Read More
  19. [jQuery] split, join 으로 공백제거 하기

    Date2018.09.06 Views2146
    Read More
  20. [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기

    Date2018.09.06 Views1815
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved