체크박스 전체선택/해제 토글

게시판 관리 및 이메일 등에서 자주보는 간단한 체크박스 전체 선택/해제 소스다.

*JQuery 사용

<table summary="체크박스 전체선택/해제 테이블. 전체선택, 내용 등을 제공">

<thead>

<th>

<label for="01">전체선택</label>

<input type="checkbox" id="01">

</th>

<th>내용</th>

</thead>

<tbody>

<tr>

<td><input type="checkbox" name="checkAll"></td>

<td>체크박스1</td>

</tr>

<tr>

<td><input type="checkbox" name="checkAll"></td>

<td>체크박스2</td>

</tr>

<tr>

<td><input type="checkbox" name="checkAll"></td>

<td>체크박스3</td>

</tr>

</tbody>

</table>

view raw checkboxAll.html hosted with ❤ by GitHub

	table {
	text-align: center;
	border-collapse: collapse;
	}
	table th, table td {
	border: 1px solid blue;
	}

view raw checkboxAll.css hosted with ❤ by GitHub

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

view raw checkboxAll.js hosted with ❤ by GitHub