반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
input {
margin: 10px 10px
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="cba" name="check_all" class="cb_all">
<label for="cba">전체선택</label>
<hr>
<input type="checkbox" id="cb1" name="cb1" class="cb_sub">
<label for="cb1">선택1</label> <br>
<input type="checkbox" id="cb2" name="cb2" class="cb_sub">
<label for="cb2">선택2</label> <br>
<input type="checkbox" id="cb3" name="cb3" class="cb_sub">
<label for="cb3">선택3</label> <br>
</div>
<script>
// 체크박스 선택 or 해제시 이벤트 발생
$("input:checkbox").on("change", function () {
if ($(this).is(":checked") === true) {
$(this).next().css("color", "red")
} else {
$(this).next().css("color", "black")
}
})
// 전체선택
$(".cb_all").on("change", function() {
if ($(this).is(":checked") === true) {
$(".cb_sub").prop("checked", true)
} else {
$(".cb_sub").prop("checked", false)
}
})
// 하위항목 하나라도 빠지면 전체선택 off
// 하위항목 다 체크시 전체선택 on
$(".cb_sub").on("change", function() {
if ($(".cb_sub:checked").length === $(".cb_sub").length) {
$(".cb_all").prop("checked", true)
} else {
$(".cb_all").prop("checked", false)
}
})
// 체크되면 빨강 해제시 검정이라고 생각했지만
// 다른 요소에 의해 체크되고 해제되면 change 이벤트가 발생하지 않는다.
// 맨 뒤에 .change() 를 써주면 강제로 change 이벤트를 발생시킬 수 있다.
</script>
</body>
</html>반응형