많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데
그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.
이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;
jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~
별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면
jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
| 제목 | 날짜 | |
|---|---|---|
| 제목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>
