728x90
반응형
실행 화면
 |
 |
 |
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body>
<h3>라디오</h3>
<hr>
<input type="radio" name="city" value="seoul" onclick="show()" checked>서울<br>
<input type="radio" name="city" value="busan" onclick="show()">부산<br>
<input type="radio" name="city" value="dague" onclick="show()">대구
<div>선택한 도시: <span id="result">seoul</span></div>
<script>
function show() {
var city = document.getElementsByName("city");
var result = document.getElementById("result");
for(var i=0; i<city.length; i++) {
if (city[i].checked)
result.innerHTML = city[i].value;
}
}
</script>
</body>
</html>
2. JQuery 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>라디오</title>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div id="my">
<input type="radio" name="city" value="seoul" checked>서울<br>
<input type="radio" name="city" value="busan">부산<br>
<input type="radio" name="city" value="dague">대구
</div>
<div>선택한 도시: <span id="result">seoul</span></div>
<script>
$(document).ready(function(){
$("#my").on('change', function(){
var city = $("input[name='city']:checked").val();
$("#result").html(city);
});
});
</script>
</body>
</html>'웹개발 > jQuery' 카테고리의 다른 글
| [jQuery] 클래스 조작, hover (0) | 2021.12.13 |
|---|---|
| [jQuery] 화면 그라데이션 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 체크 박스 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 값 입력받아 계산하기 (0) | 2021.12.13 |
