체크박스 전체 선택 / 전체 해제
- 하나라도 체크 해제 시 전체 선택 체크 박스 선택 해제
- 4개 체크박스 모두 체크 시 전체 선택 체크박스 자동 체크
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid gray;
}
table {
width: 50%;
margin: 0 auto;
}
</style>
<script>
$(document).ready(function() {
// 전체 선택 클릭시 전부 선택 / 해제
$(":checkbox").eq(0).change(function(event) {
$(":checkbox:gt(0)").prop("checked", $(this).prop("checked"));
});
// 4개 전부 체크시 전체 선택 체크 / 하나라도 체크 해제시 전체 선택 해제
$(":checkbox:gt(0)").click(function(event) {
if ($(":checkbox:gt(0):checked").length == 4) {
$(":checkbox:eq(0)").prop("checked", true);
} else {
$(":checkbox:eq(0)").prop("checked", false);
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td><input type="checkbox" class="all">전체 선택</td>
<td>Eligendi!</td>
<td>Nesciunt.</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="ck1"></td>
<td>Animi.</td>
<td>Hic.</td>
</tr>
<tr>
<td><input type="checkbox" id="ck2"></td>
<td>Esse.</td>
<td>Fuga.</td>
</tr>
<tr>
<td><input type="checkbox" id="ck3"></td>
<td>Fuga.</td>
<td>Ducimus?</td>
</tr>
<tr>
<td><input type="checkbox" id="ck4"></td>
<td>Beatae.</td>
<td>Optio.</td>
</tr>
</tbody>
</table>
</body>
</html>
반응형
'Front > jquery' 카테고리의 다른 글
| [jQuery] google maps api 예제 (0) | 2022.01.08 |
|---|
