① JQuery소스
<?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>Insert title here</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가 로딩이 끝나고 난 뒤 실행된다.
// alert("정말??/");
$("#all").click(function(){
// this>> all의 function안에 다시 all을 써야하는 경우 대체할 수 있다.
// if($(this).attr("checked")=="checked")
var boo = false;
if($(this).is(":checked")){
// $("input[name=cb]").attr("checked","checked");
//$("input[name=cb]").attr("checked",false);
boo = true;
} $("input[name=cb]").attr("checked",boo);
});
});
// Jquery를 사용하지 않고 구현하기
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" checked="checked" 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번
'WEB > JQuery' 카테고리의 다른 글
| WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0) | 2012.09.14 |
|---|---|
| WEB 5일차 첫번째) JQuery복습 (0) | 2012.09.14 |
| WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0) | 2012.09.13 |
| WEB 4일차 첫번째) JQuery : 이미지에 여러가지 이벤트 부여하기 (0) | 2012.09.13 |
모데스티