jQuery all-check

whdudgms·2022년 11월 25일
0

jquery

목록 보기
18/20
<!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="봄">&nbsp;&nbsp;
		<input type="checkbox" name="session" value="여름">여름&nbsp;&nbsp;
		<input type="checkbox" name="session" value="가을">가을&nbsp;&nbsp;
		<input type="checkbox" name="session" value="겨울">겨울&nbsp;&nbsp;
	</div>
	<button type="button" id="btn">선택완료</button>
	<hr>
	<div id="displayDiv"></div>
	
	<script type="text/javascript">
	$("#btn").click(function() {
		//검색태그의 자식태그(checkbox)중 선택된 태그를 반환받아 저장
		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")) {//전체 선택인 경우
			//$(selector).prop(name, value) : 선택자로 검색된 태그(입력태그)의 상태를 변경하는 메소드
			// => input 태그(type 속성값 - checkbox 또는 radio), select 태그(option)에서만 사용
			$("#checkboxList").children().prop("checked", true);
		} else {//전체 취소인 경우
			$("#checkboxList").children().prop("checked", false);
		}
	});
	</script>
</body>
</html>

0개의 댓글