라디오 버튼 선택에 따른 DIV 표시 및 숨김

문제 상황

웹 개발에서 라디오 버튼을 이용해 사용자의 선택에 따라 특정 DIV(division)를 보이거나 숨기는 작업이 필요한 경우가 있습니다. 여기서 DIV는 웹 페이지에서 하나의 영역을 나타냅니다. 이 문제에 대한 효율적인 해결 방법을 알아봅시다.

코드 오류: 없음

해당 문제 상황에서는 특별한 코드 오류가 발생하지 않았습니다.

JavaScript를 사용한 해결 방법

JavaScript를 활용하면 이 문제를 쉽게 해결할 수 있습니다. JavaScript는 웹 페이지에서 다양한 상호작용을 구현하는 프로그래밍 언어입니다.

1. HTML 구조 설정

먼저, HTML에서 라디오 버튼과 DIV를 생성합니다.

<input type="radio" name="choice" value="show"> 보이기
<input type="radio" name="choice" value="hide"> 숨기기
<div id="targetDiv">이 DIV를 보이거나 숨길 것입니다.</div>

2. JavaScript 코드 작성

다음으로, 라디오 버튼의 선택에 따라 DIV를 표시하거나 숨기는 JavaScript 코드를 작성합니다.

document.addEventListener('DOMContentLoaded', function() {
    var radios = document.getElementsByName('choice');
    var targetDiv = document.getElementById('targetDiv');
    
    for (var i = 0; i < radios.length; i++) {
        radios[i].addEventListener('change', function() {
            if (this.value === 'show') {
                targetDiv.style.display = 'block';
            } else {
                targetDiv.style.display = 'none';
            }
        });
    }
});

결론

이러한 방법을 통해 라디오 버튼 선택에 따라 원하는 DIV를 쉽게 표시하거나 숨길 수 있습니다. 이 방법은 사용자 경험을 향상시키는 데 아주 유용합니다. JavaScript를 활용하면 이 외에도 웹 페이지의 다양한 요소를 동적으로 제어할 수 있어, 더욱 풍부한 상호작용을 구현할 수 있습니다.