실행 소스
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>CheckBox 전체 선택</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// 일종의 익명내부클래스 같은 존재
// body가 로딩이 끝나고 난 뒤 실행이 된다.
$('#all').click(function(){
// if($(this).attr("checked") == 'checked') {
var boo = false;
if($(this).is(":checked")) {
// alert("체크됐구만");
boo = true;
} else {
// alert("풀렸구만");
}
$(':checkbox[name=cb]').attr('checked', boo);
});
});
function chk(all) {
var cb = document.getElementsByName("cb");
var boo = false;
if(all.checked) boo = true;
for(var i=0; i<cb.length; i++) {
cb[i].checked = boo;
}
}
</script>
</head>
<body>
<input type="checkbox" value="all" id="all" onclick="chk(this);" /> 전체 <br />
<input type="checkbox" value="1" name="cb"/> 1번 <br />
<input type="checkbox" value="2" name="cb"/> 2번 <br />
<input type="checkbox" value="3" name="cb"/> 3번 <br />
<input type="checkbox" value="4" name="cb"/> 4번 <br />
<input type="checkbox" value="5" name="cb"/> 5번 <br />
<input type="checkbox" value="6" name="cb"/> 6번 <br />
<input type="checkbox" value="7" name="cb"/> 7번 <br />
<input type="checkbox" value="8" name="cb"/> 8번 <br />
<input type="checkbox" value="9" name="cb"/> 9번 <br />
<input type="checkbox" value="10" name="cb"/> 10번 <br />
</body>
</html>
실행 결과
1번
2번
3번
4번
5번
6번
7번
8번
9번
10번
'Dev. 웹 > JavaScript' 카테고리의 다른 글
| [JQuery 예제] 동적생성 및 복습 (0) | 2012.09.13 |
|---|---|
| [JQuery 예제] 동적생성과 Traversing (0) | 2012.09.13 |
| [JQuery 예제] 셀렉터(Selector) 이용법 및 이벤트 적용 (0) | 2012.09.13 |
| [JavaScript 예제] 자바스크립트 정규식 이용한 유효성 검사 (5) | 2012.09.13 |
| [JavaScript 예제] 시간이 흐르는 시간 텍스트 출력하기 (0) | 2012.09.12 |