<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Checkbox Event</h1>
<hr>
<h3>좋아하는 계절을 선택해 주세요.(다중 선택 가능)</h3>
<hr>
<input type="checkbox" id="allCheck">전체 선택(취소)
<div id="checkboxList">
<input type="checkbox" name="session" value="봄">봄
<input type="checkbox" name="session" value="여름">여름
<input type="checkbox" name="session" value="가을">가을
<input type="checkbox" name="session" value="겨울">겨울
</div>
<button type="button" id="btn">선택완료</button>
<hr>
<div id="displayDiv"></div>
<script type="text/javascript">
$("#btn").click(function() {
var $check=$("#checkboxList").children(":checked");
if($check.length==0) {
$("#displayDiv").text("당신이 좋아하는 계절은 없습니다.");
return;
}
var output="당신은 [";
$check.each(function(i) {
output+=$(this).val();
if($check.length-1!=i) {
output+=",";
}
});
output+="]을 좋아합니다.";
$("#displayDiv").text(output);
});
$("#allCheck").change(function() {
if($(this).is(":checked")) {
$("#checkboxList").children().prop("checked", true);
} else {
$("#checkboxList").children().prop("checked", false);
}
});
</script>
</body>
</html>
