(기초)그래서 뭘 배운거야?/jQuery
JQ-07-Selector : 속성 선택자(3)
Soheny.P
2021. 10. 12. 21:18
728x90
<!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="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display:none;">내용2</p>
<p>내용3</p>
</div>
<p id="zone1">
<select name="course" id="course">
<option value="opt1" id="opt1">옵션1</option>
<option value="opt2" id="opt2" selected>옵션2</option>
<option value="opt3" id="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby" value="독서"><label>독서</label>
<input type="checkbox" name="hobby" value="자전거"><label>자전거</label>
<input type="checkbox" name="hobby" value="등산" checked><label>등산</label>
</p>
<p id="zone3">
<input type="radio" name="gender" value="female"checked>여성
<input type="radio" name="gender" value="male">남성
</p>
<script>
$(function () {
// 숨겨진 내용2
$("#wrap p:hidden").css({
"display": "block",
"background-color": "yellow"
});
// 선택된 옵션값
let v1 = $("#zone1 :selected").val();
console.log(v1); //otp2
let v2 = $("#zone2 :checked").val();
console.log(v2); //등산
let v3 = $("#zone3 :checked").val();
console.log(v3); //female
});
</script>
</body>
</html>
728x90