본문 바로가기

개발일지/JavaScript + jquery

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