jQuery 전체선택 해제 체크박스 이벤트 구현 방법

jQuery 전체선택 해제 체크박스 이벤트 구현 방법

 

[테이블 리스트 코딩부]

 

<table summary="목록">
	<caption>
		<span>목록</span>
	</caption>
	<colgroup>
		<col width="6%" />
		<col width="8%" />
		<col width="8%" />
		<col width="8%" />
		<col width="*" />
	</colgroup>
	<thead>
	<tr>
		<th scope="col" class="ft"><input type="checkbox" id="check_all" /></th>
		<th scope="col">지표 정보</th>
		<th scope="col">단위</th>
		<th scope="col">입력방식</th>
		<th scope="col" class="lt">설명</th>
	</tr>
	</thead>
	<tbody>
		//데이터 불러오는 부분 (체크박스의 name 은 chkYn으로 한다.)
	</tbody>
</table>

 

위와 같은 테이블 리스트가 있다고 하자.

붉은색으로 표시된 리스트 테이블 해드 상의 체크박스를 클릭하면 리스트 전체 선택/해제가 되도록 jQuery로 구현 해보자.

 

 

 

코드는 다음과 같다.

 

[전체선택/해제 구현부]

<script>
$(document).ready(function(){
	$("#check_all).click(){
		if($('#check_all').is(':checked') == true){
			$("input[name=chkYn]:checked").attr("checked", true);
		}else{
			$("input[name=chkYn]:checked").attr("checked", false);
		}
	});
});
</script>

 

jQuery를 활용하여 전체선택/해제 체크박스를 구현해 보았다.

간단한 구문이지만 설명을 하자면

 

$("#check_all).click(){

// 전체선택/해제 체크박스를 클릭할 경우

 

if($('#check_all').is(':checked') == true){

// id가 chkeck_all인 element가 checked 되었다면 

 

$("input[name=chkYn]:checked").attr("checked", true);

//name이 chkYn 인 input element의 checked 속성을 true로 해라 

 

}else{

//아니면

 

$("input[name=chkYn]:checked").attr("checked", false);

//name이 chkYn 인 input element의 checked 속성을 false로 해라 

 

입니다.

 

[전체선택/해제 다른방법]

 

$(document).ready(function(){
	$("#checkAll").click(function(){
		if($("#checkAll").prop("checked")){
			$("input[name=chk]").prop("checked", true);
		}else{
			$("input[name=chk]").prop("checked", false); 
		}
	});
});

prop메소드를 사용해 속성값을 확인하고 변경하는 방법이다.

 

 

[사용된 jQuery 정리]

is(expr)

: 대상이 되는 elemet들 중에서 입력 값인 expr에 만족하는 element가 하나라도 존재할 경우 true 를 리턴 하고 , 그렇지 않을 경우 false를 리턴한다.

 

attr(key, value)

key - (String) 적용하길 원하는 속성 명

value - (Object) 적용하길 원하는 속성 값

: 모든 일치하는 element에 대해서 입력 받은 형식의 속성을 적용한다. 하나의 속성을 적용할 경우 사용하며, 여러 속성을 적용하려면 attr("key1" : "value1", "key2":"value2"...) 

또는 attr(key1, value1).attr(key2, value2)의 형식으로 적용이 가능하다.