• 분류 전체보기 (160)
    • 개인프로젝트 (5)
      • 시연영상모음 (4)
      • 주저리주저리.. (1)
    • 자바스크립트이야기 (69)
      • ExtJS (30)
      • ExtJS 유의사항 (3)
      • HTML5 (1)
      • jQuery (17)
      • jQuery플러그인소개 (9)
      • jQuery UI 소개 (9)
    • 스프링연동하기 (23)
      • spring3 mvc 설정 (4)
      • spring3 mybatis 설정 (4)
      • spring3 기타설정 (11)
      • ibatis and mybatis (4)
    • DB (26)
      • MySQL vs MS-SQL vs O.. (5)
      • MySQL (10)
      • MSSQL (5)
      • Oracle (6)
    • 서버에웹환경구축하기 (13)
      • 1.VirtualBox+CentOS .. (5)
      • 2.JAVA(JDK) 설치 (1)
      • 3.Apache+Tomcat 설치 (3)
      • 4,SVN Server 설치 (1)
      • 5.마리아DB(MariaDB) 설치 (2)
      • 6.몽고DB(MongoDB)설치 (1)
    • 샘플소스 (14)
      • 샘플소스(JAVA) (7)
      • 샘플소스(JSTL) (4)
      • 샘플소스(jQuery/스크립트) (3)
    • 에디터연동 (5)
      • NAVER-스마트에디터 (4)
      • DAUM-다음에디터 (1)
    • 블로그팁 (3)
    • 디지털이야기 (2)
댓글
jquery checkbox
1
/34
2014. 6. 10. 01:02
jquery 체크박스 전체 선택/해제 샘플소스

jQuery attr / prop 함수에 대해서 설명하던 도중 생각이나서  작성하게 되었습니다.

심플한 소스입니다.



<!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>


슈퍼맨슈퍼맨슈퍼맨


도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

저작자표시 (새창열림)

'샘플소스 > 샘플소스(jQuery/스크립트)' 카테고리의 다른 글

swfobject.js 를 이용하여 화면에 플래시파일 호출하기  (0) 2014.07.29
자바스크립트 replaceall 함수만들기  (0) 2014.06.08
이전 1 다음

티스토리툴바