Dev/jQuery

[jQuery] 체크박스 전체 체크/해제 구현하기

쇼크리더 2009. 12. 21. 18:44
반응형

소스만 간단히.. ^^;
<!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>
    <title></title>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function () {
//			$('<li></li>').html('<label><input type="checkbox" id="discover-all" /><em>check all</em></lable>')
//			.appendTo('li.discover > ul');

			$('#chkAll').click(function () {
//				var $checkboxes = $(this).parents('ul:first').find(':checkbox');
				var $checkboxes = $(this).parents('#discover:first').find(':checkbox');
				if(this.checked){
					$checkboxes.attr('checked', 'true');
					}else{
					$checkboxes.attr('checked', '');
				};
			});
		});
	</script>
</head>
<body>
	<p>
		체크박스 전체 체크/해제 다루기
	</p>
	<p>
		좋아하는 영화 고르세요.
	</p>
	<div id="discover">
<!--		<ul>
			<li><label><input id="chkAll" type="checkbox" />check all</lable><br /></li>
			<li><label><input id="Checkbox11" type="checkbox" />아바타</lable><br /></li>
			<li><label><input id="Checkbox2" type="checkbox" />모범시민</lable><br /></li>
			<li><label><input id="Checkbox3" type="checkbox" />뉴 문</lable><br /></li>
			<li><label><input id="Checkbox4" type="checkbox" />여배우들</lable><br /></li>
			<li><label><input id="Checkbox5" type="checkbox" />시크릿</lable><br /></li>
			<li><label><input id="Checkbox6" type="checkbox" />2012</lable><br /></li>
			<li><label><input id="Checkbox7" type="checkbox" />걸프렌즈</lable><br /></li>
			<li><label><input id="Checkbox8" type="checkbox" />닌자어쌔신</lable><br /></li>
			<li><label><input id="Checkbox9" type="checkbox" />홍길동의 후예</lable><br /></li>
			<li><label><input id="Checkbox10" type="checkbox" />크리스마스 캐롤</lable><br /></li>
		</ul>-->
			<input id="chkAll" type="checkbox" />check all<br />
			<input id="Checkbox11" type="checkbox" />아바타<br />
			<input id="Checkbox2" type="checkbox" />모범시민<br />
			<input id="Checkbox3" type="checkbox" />뉴 문<br />
			<input id="Checkbox4" type="checkbox" />여배우들<br />
			<input id="Checkbox5" type="checkbox" />시크릿<br />
			<input id="Checkbox6" type="checkbox" />2012<br />
			<input id="Checkbox7" type="checkbox" />걸프렌즈<br />
			<input id="Checkbox8" type="checkbox" />닌자어쌔신<br />
			<input id="Checkbox9" type="checkbox" />홍길동의 후예<br />
			<input id="Checkbox10" type="checkbox" />크리스마스 캐롤<br />
	</div>
</body>
</html>
반응형