[jquery] 체크박스(checkbox) 전체선택/해제
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#checkedAll').click(function() {
// 만약 checkedAll 이 'checked'되어 있다면
if ($('#checkedAll').prop('checked')) {
// checkbox 타입의 input 중 name이 subCheck 인 것들의 checked의 prop 값을 true로 변경
$('input[name=subCheck]:checkbox').each(function() {
$(this).prop('checked', true);
});
// checkedAll 이 checked 되어 있지 않다면
} else {
// checkbox 타입의 input 중 name이 subCheck 인 것들의 checked의 prop 값을 false로 변경
$('input[name=subCheck]:checkbox').each(function() {
$(this).prop('checked', false);
});
}
})
});
</script>
</head>
<body>
<table>
<thead><tr><td>전체선택: <input type="checkbox" id="checkedAll"></td></tr></thead>
<tbody>
<tr><td><input name="subCheck" type="checkbox" value=0>: 사과</td></tr>
<tr><td><input name="subCheck" type="checkbox" value=1>: 자두</td></tr>
<tr><td><input name="subCheck" type="checkbox" value=2>: 수박</td></tr>
<tr><td><input name="subCheck" type="checkbox" value=4>: 체리</td></tr>
</tbody>
</table>
</body>
</html>