[javascript] 입력 폼에서 특정 요소의 가시성 조절하기

11 Dec 2023

javascript

아래는 예시 코드입니다.

// HTML
<form>
  <label for="showElement">Show Element</label>
  <input type="checkbox" id="showElement" onchange="toggleElementVisibility()">
  <div id="elementToToggle" style="display: none;">
    This is the element to toggle
  </div>
</form>

// JavaScript
function toggleElementVisibility() {
  var element = document.getElementById("elementToToggle");
  var checkbox = document.getElementById("showElement");
  element.style.display = checkbox.checked ? "block" : "none";
}

위 코드에서는 input 태그의 onchange 이벤트를 이용하여 toggleElementVisibility 함수를 호출하여 특정 요소의 가시성을 조절하고 있습니다. onchange 이벤트는 input 요소의 값이 변경될 때마다 호출됩니다.

이 함수는 getElementById 메서드를 사용하여 요소를 찾고, style.display 속성을 사용하여 요소를 숨기거나 보이게 합니다.

이렇게 함으로써, 입력 폼에서 특정 요소의 가시성을 동적으로 조절할 수 있게 됩니다.

이상으로 Javascript를 사용하여 입력 폼에서 특정 요소의 가시성을 조절하는 방법에 대해 알아보았습니다.