반응형
래디오에 체크된 기본값을 확인하여 로드될 때 내용을 출력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A타입과 B타입 선택</title>
<style>
/* 라디오 버튼 스타일링 */
label {
display: inline-block;
margin-right: 10px;
}
/* 레이어 스타일링 */
.layer {
display: none;
}
/* 선택한 레이어만 보이도록 */
input[type="radio"]:checked + .layer {
display: block;
}
</style>
</head>
<body>
<h1>A타입과 B타입 선택</h1>
<form>
<label for="a-type">A타입</label>
<input type="radio" id="a-type" name="type" value="A" checked>
<label for="b-type">B타입</label>
<input type="radio" id="b-type" name="type" value="B">
</form>
<!-- A타입 레이어 -->
<div class="layer" id="a-layer">
<h2>A타입 레이어</h2>
<!-- A타입 레이어의 내용을 여기에 추가 -->
<p>이것은 A타입 레이어의 내용입니다.</p>
</div>
<!-- B타입 레이어 -->
<div class="layer" id="b-layer">
<h2>B타입 레이어</h2>
<!-- B타입 레이어의 내용을 여기에 추가 -->
<p>이것은 B타입 레이어의 내용입니다.</p>
</div>
<script>
// 페이지 로드 시 라디오 버튼의 기본값 확인하여 레이어 표시
window.addEventListener('load', () => {
const aTypeRadio = document.getElementById('a-type');
const bTypeRadio = document.getElementById('b-type');
const aLayer = document.getElementById('a-layer');
const bLayer = document.getElementById('b-layer');
if (aTypeRadio.checked) {
aLayer.style.display = 'block';
bLayer.style.display = 'none';
} else if (bTypeRadio.checked) {
aLayer.style.display = 'none';
bLayer.style.display = 'block';
}
});
// 라디오 버튼 변경 이벤트 처리
const aTypeRadio = document.getElementById('a-type');
const bTypeRadio = document.getElementById('b-type');
const aLayer = document.getElementById('a-layer');
const bLayer = document.getElementById('b-layer');
aTypeRadio.addEventListener('change', () => {
aLayer.style.display = 'block';
bLayer.style.display = 'none';
});
bTypeRadio.addEventListener('change', () => {
aLayer.style.display = 'none';
bLayer.style.display = 'block';
});
</script>
</body>
</html>반응형
'html&php' 카테고리의 다른 글
| 단어 간 거리 띄우기 (0) | 2024.03.07 |
|---|---|
| 은행 계좌번호 복사에 사용하는 터치하면 복사하기 (0) | 2024.01.22 |
| 래디오 버튼을 이용한 선택에 따른 내용 출력하기 (0) | 2023.10.05 |
| css와 li 그리고 스크립트를 이용한 세로 메뉴 (0) | 2023.04.26 |
| 탭 메뉴 · 마우스를 메뉴에 올리면 자동으로 내용 나오게 하기 (0) | 2023.04.05 |