<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
//전체선택 체크박스 클릭
$("#allCheck").click(function(){
//만약 전체 선택 체크박스가 체크된상태일경우
if($("#allCheck").prop("checked")) {
//해당화면에 전체 checkbox들을 체크해준다
$("input[type=checkbox]").prop("checked",true);
// 전체선택 체크박스가 해제된 경우
} else {
//해당화면에 모든 checkbox들의 체크를해제시킨다.
$("input[type=checkbox]").prop("checked",false);
}
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
전체선택 : <input type="checkbox" id="allCheck"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
//전체선택 체크박스 클릭
$("#allCheck").click(function(){
//만약 전체 선택 체크박스가 체크된상태일경우
if($("#allCheck").prop("checked")) {
//해당화면에 전체 checkbox들을 체크해준다
$("input[type=checkbox]").prop("checked",true);
// 전체선택 체크박스가 해제된 경우
} else {
//해당화면에 모든 checkbox들의 체크를해제시킨다.
$("input[type=checkbox]").prop("checked",false);
}
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
전체선택 : <input type="checkbox" id="allCheck"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
</tr>
</table>
</body>
</html>
'jquery소스' 카테고리의 다른 글
| [jQuery] scrollTop()을 활용한 고정스크롤리모컨 (0) | 2015.09.18 |
|---|---|
| 버튼 클릭시 이동 스크롤 (3) | 2015.09.18 |
| 플러그인 - 페이지 스크롤 기억 (0) | 2015.09.18 |