[JavaScript] radio check div 숨기기/표시하기 문제해결

 

- radio 버튼을 눌렀을 때 해당 값에 해당하는 div에 있는 내용을 활성화 시키고, 해당 값이 아닌 것은 비활성화 시키기 위해서 자바스크립트 값을 onClick에 함수를 줬다.

- 이 때의 문제는 페이지 로드시 온클릭에 해당하지 않기 때문에 숨김 처리해뒀던 div가 떠있다는 것이다.

- 곰곰히 생각해 본 결과 onload 시에도 값을 줘야한다는 걸 깨달았다.

 

 

<script type="text/javascript"> 
    window.onload = function() {
        var radioCheck = document.querySelector('input[name="numRadio"]:checked').value;
        setDisplay(radioCheck);
    }

    function setDisplay(radioCheck) {
        if(radioCheck == 'R') {
            document.getElementById('num1').style.display = 'block';
            document.getElementById('num2').style.display = 'none';
        } else {
            document.getElementById('num1').style.display = 'none';
            document.getElementById('num2').style.display = 'block';
        }
    }
</script>

 

 

window.onload = function() { }

윈도우 온 로드시 함수를 실행

 

체크 값을 가져와서 setDisplay()에 넣음

 

setDisplay는 라디오 버튼 onClick시 실행되는 함수로 style로 div 값을 숨기고 오픈

 

---

Jquery에 익숙해져서 자바스크립트는 전혀 기억이 나지 않았는데 이번에 공부가 되었다. 앞으로도 공부의 필요성을 느꼈음..