<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1">
<thead>
<tr>
<th style="width: 10%"><input type="checkbox" name="checkAll" onclick="checkAll(this)"></th>
<th style="width: 30%">이름</th>
<th style="width: 20%">번호</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><input type="checkbox" name="checkB" onclick="checkClick(this)"></td>
<td>흰둥이1</td>
<td>000-0000-0000</td>
</tr>
<tr>
<td style="text-align: center"><input type="checkbox" name="checkB" onclick="checkClick(this)"></td>
<td>흰둥이2</td>
<td>111-1111-1111</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function checkAll(e){
// 전체 체크박스가 체크되어 있으면
if(e.checked == true){
// 같은 이름의 체크박스 모두 checked
$("input[name=checkB]").prop("checked", true);
}else{
$("input[name=checkB]").prop("checked", false);
}
}
function checkClick(e){
// 전체 선택 후 -> 다른 체크 박스를 해제 했을때 -> 전체 체크박스(checkAll) 체크 해제 해주기
if(e.checked == false) {
$("input[name=checkAll]").prop("checked", false);
}else{
let checkBoxAllCount = $("input[name=checkB]").length; // 체크박스 총 개수
let checkBoxCheckCount = $("input[name=checkB]:checked").length; // 체크된 체크박스 개수
// 체크박스 개수와 체크된 체크박스의 수가 같으면 전체 체크박스(checkAll) 체크 해주기
if(checkBoxAllCount == checkBoxCheckCount){
$("input[name=checkAll]").prop("checked", true);
}
}
}
</script>
</html>
핵심은 동일한 name 을 주고 제어를 해주면 된다
'개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] 체크 된 행의 데이터 가져오기 (0) | 2025.02.23 |
|---|---|
| [JavaScript] 파일선택 시 이미지 미리보기(FileReader) (0) | 2025.02.22 |
| [JavaScript] jQuery 를 이용한 Enter key 적용하기 (0) | 2024.08.02 |
| [JavaScript] document.form.submit() 사용하기 (0) | 2024.07.10 |
| [JavaScript] setInterval() 함수 사용하기 (0) | 2023.07.30 |
댓글