jquery를 이용하여 체크박스 전체 선택 및 해제하기

개발을 하다보면 일괄로어떠한 데이터들을 일괄로 삭제 또는 추가를 하기 위해 

체크박스를 이용하여 기능을 구현합니다.

예를 들면 게시판 목록에 쉽게 확인 할 수 있습니다.

저희가 자주 쓰는 네이버나 다음의 메일목록을 예를 들도록 해보도록 하겠습니다 ^^

 

위 화면을 보시면 리스트의 좌측에 체크박스들이 각 리스트마다 체크박스가 존재합니다.

불필요한 메일들을 체크박스를 선택을 하여 한번에 목록에서 지우기 위하여 있는것입니다.

그렇다면 최상단에 존재하는 체크박스는 무엇인가요? 

바로 저 상단 체크박스는 현재 존재하는 목록에 체크박스들을 일괄로 선택하게끔 지원을 해주는 놈이되겠습니다.

한번 최상단 체크박스를 클릭해보도록 하겠습니다.

한번에 체크박스들이 선택되었죠? 

바로이 기능에 대하여 포스팅을 작성해보도록 하겠습니다

본 포스팅은 jquery 1.9버전의 CDN을 이용하여 진행을 하도록 하였습니다.

jqeury CDN 스크립트 INCLUDE하기

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>

HTML코드 작성(BODY 태그내에 기술)

<table border="1">
	<tr>
		<td><input type="checkbox" id="checkall" /></td>
		<td>내용</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" /></td>
		<td>테스트내용입니다테스트내용입니다</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="chk" /></td>
		<td>안녕하세요개발로짜입니다안녕하세요개발로짜입니다</td>
	</tr>
</table>

jquery 스크립트 코드 작성

$(document).ready(function(){
	//최상단 체크박스 클릭
	$("#checkall").click(function(){
		//클릭되었으면
		if($("#checkall").prop("checked")){
			//input태그의 name이 chk인 태그들을 찾아서 checked옵션을 true로 정의
			$("input[name=chk]").prop("checked",true);
			//클릭이 안되있으면
		}else{
			//input태그의 name이 chk인 태그들을 찾아서 checked옵션을 false로 정의
			$("input[name=chk]").prop("checked",false);
		}
	})
})

상단코드 기준으로 한번 실행을 해보도록 하겠습니다.

최초 실행 화면

체크박스 선택화면

어떤가요? 맨위에 캡처한 기능과 동일한 기능이 동작 되었죠? ㅎㅎ

프로젝트에 일괄처리가 존재한다면 체크박스로 전체선택 및 해제하는 기능을 이용해보세요!

by 개발로짜