성별선택하고 상자위에 선택한 성별이 나타나게 표시하기
<!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>성별 체크</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('input[name=gender]').click(function(){
var text = $(this).val();
$('input[type=text]').val(text);
})
})
</script>
</head>
<body>
<input type="text" readonly><br>
<label><input type="radio" name="gender" value="남성">남성</label>
<label><input type="radio" name="gender" value="여성">여성</label>
</body>
</html>더보기
쌤코드
<!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>성별 체크</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('input[name=gender]').change(function(){
var value = $(this).val();
$('.view-box').text(value);
})
})
</script>
<style>
.view-box{
height: 30px; line-height: 30px; border: 1px solid black;
}
</style>
</head>
<body>
<div class="view-box"></div>
<label><input type="radio" name="gender" value="남성">남성</label>
<label><input type="radio" name="gender" value="여성">여성</label>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_input창 추가하기(이력서 경력추가기능) (1) | 2021.06.23 |
|---|---|
| JQ_checkbox 선택을 나열(표시)하기 (0) | 2021.06.23 |
| JQ_사이드 메뉴창 만들기 (1) | 2021.06.23 |
| JQ_요소추가하기(append, prepend, appendTo, prependTo) (0) | 2021.06.23 |
| JQ_메뉴기능(네이버 오늘읽을만한글 ) (0) | 2021.06.23 |