ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [jQuery] 체크박스 전체 체크/해제 구현하기
    Dev/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>
    
    
    
    반응형
Designed by Tistory.