라디오 버튼 선택에 따른 DIV 요소 숨기기 및 표시하기

문제 상황과 해결 목표

StackOverflow에 올라온 질문에 따르면, 사용자는 HTML 라디오 버튼을 선택할 때마다 특정 DIV 요소가 나타나거나 사라지게 하고 싶다고 합니다. 이 문제를 해결하기 위해서는 JavaScript를 활용해야 합니다. 여기서 DIV는 Document Object Model(DOM)에서 HTML 문서의 구성 요소를 나타내는 것을 의미합니다.

해결 방법

JavaScript 이용하기

JavaScript는 웹 페이지의 동적인 요소를 관리하는 언어입니다. 여기서는 addEventListener와 style.display 속성을 이용하여 문제를 해결할 예정입니다.

document.addEventListener("DOMContentLoaded", function() {
    var radios = document.getElementsByName("choice");
    var divs = document.getElementsByClassName("show-hide-div");

    for (let i = 0; i < radios.length; i++) {
        radios[i].addEventListener("change", function() {
            for (let j = 0; j < divs.length; j++) {
                divs[j].style.display = "none";
            }
            document.getElementById(this.value).style.display = "block";
        });
    }
});

코드의 작동 원리

1. DOMContentLoaded 이벤트는 HTML 문서가 완전히 로드된 후 실행됩니다.
2. getElementsByName과 getElementsByClassName 메서드로 라디오 버튼과 DIV 요소를 각각 가져옵니다.
3. 라디오 버튼에 변화가 생기면(change), 모든 DIV 요소를 숨깁니다(style.display = "none").
4. 선택한 라디오 버튼의 value 속성과 일치하는 ID를 가진 DIV 요소만 표시합니다(style.display = "block").

주의 사항

이 코드는 모든 라디오 버튼과 DIV 요소가 페이지 로드 후에 이미 존재한다고 가정합니다. 동적으로 요소가 추가되는 경우에는 이 코드만으로는 부족할 수 있습니다.

마무리

라디오 버튼 선택에 따라 DIV 요소를 숨기거나 표시하는 것은 JavaScript를 통해 간단히 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있으며, 웹 페이지의 동적인 요소를 효과적으로 관리할 수 있습니다.