jQuery를 사용하여 라디오 버튼 선택에 따라 다른 입력 폼을 표시하거나 변경하려면 change 이벤트를 활용하면 됩니다. 아래는 간단한 예제를 통해 이를 구현하는 방법을 보여드립니다.
1. HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 라디오 버튼으로 입력폼 변경</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="radio-group">
<input type="radio" id="form1" name="form-selector" value="1">
<label for="form1">Form 1</label>
<input type="radio" id="form2" name="form-selector" value="2">
<label for="form2">Form 2</label>
</div>
<!-- 입력 폼들 -->
<div id="form-container">
<div id="form-1" class="form-content">
<label for="input1">Input for Form 1:</label>
<input type="text" id="input1" placeholder="Enter Form 1 data">
</div>
<div id="form-2" class="form-content" style="display: none;">
<label for="input2">Input for Form 2:</label>
<input type="text" id="input2" placeholder="Enter Form 2 data">
</div>
</div>
</body>
</html>
2. CSS (선택 사항)
.radio-group {
margin-bottom: 20px;
}
.radio-group label {
margin-right: 15px;
cursor: pointer;
}
.form-content {
margin-top: 20px;
}
3. jQuery
$(document).ready(function () {
// 라디오 버튼 변경 이벤트
$("input[name='form-selector']").on("change", function () {
// 선택된 값 가져오기
var selectedValue = $(this).val();
// 모든 폼 숨기기
$(".form-content").hide();
// 선택된 폼만 보이기
$("#form-" + selectedValue).show();
});
});
동작 설명
- HTML
- radio-group에 라디오 버튼을 정의합니다.
- 각 라디오 버튼은 다른 입력 폼과 연결됩니다 (form-1, form-2 등).
- CSS
- 각 입력 폼은 기본적으로 숨겨놓고 선택 시 표시합니다.
- jQuery
- 사용자가 라디오 버튼을 선택하면 change 이벤트가 트리거됩니다.
- 선택된 라디오 버튼의 value를 가져와 해당하는 입력 폼만 표시합니다.
예제의 확장
- 다양한 폼 추가: 더 많은 라디오 버튼과 입력 폼을 추가할 수 있습니다.
- 애니메이션 추가: 폼 전환 시 fadeIn() 또는 slideDown()과 같은 애니메이션을 추가해도 좋습니다.
$("#form-" + selectedValue).fadeIn(); // 예시
#jquery #change #radio #css #on #hide #show #event #fadeIn
반응형
'프로그램' 카테고리의 다른 글
| jquery 다중 선택 박스 값 출력 (0) | 2024.12.03 |
|---|---|
| jquery 텍스트 필드 값 변경 시 유효성 검사 (0) | 2024.12.01 |
| jquery 체크박스 선택 시 특정 섹션 활성화/비활성화 (0) | 2024.11.27 |
| jquery 드롭다운 메뉴에서 선택에 따라 내용 변경 (0) | 2024.11.26 |
| jQuery의 change() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.24 |
댓글