JavaScript
속성 상태에 따른 탐색 선택자 (visible, hidden, selected, checked)
Remi
2021. 7. 25. 16: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.js"></script>
<script>
$(function () {
$("#wrap p:hidden")
.css({
"display":"block",
"background":"#ff0"
});
var z1 =$("#zone1 :selected").val()
console.log(z1)
var z2 =$("#zone2 :checked").val()
console.log(z2)
var z3 =$("#zone3 :checked").val()
console.log(z3)
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display: none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<select name="course" id="course">
<option value="opt1">옵션1</option>
<option value="opt2" selected>옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서"> 독서
<input type="checkbox" name="hobby2" value="자전거"> 자전거
<input type="checkbox" name="hobby3" value="등산" checked> 등산
</p>
<p id="zone3">
<input type ="radio" name = "gender" value="male">남성
<input type ="radio" name = "gender" value="female" checked>여성
</p>
</form>
</body>
</html>728x90
반응형