radio 버튼 DIV 활성화 및 비활성화 / 라디오 버튼 클릭시 변경되지 않는 오류

라디오 버튼을 이용하여 DIV를 각각 활성화 시켜서 사용하는 함수를 간단히 작성하면 아래와 같다.

- HTML

<input type="radio" name="tp_cd" value="1" checked="checked"> 1번

<input type="radio" name="tp_cd" value="2" > 2번

<div id="POP1"><p>POP1의 영역이 보임</p></div>

<div id="POP2" style="display: none;"><p>POP2의 영역이 보임</p></div>

- jquery

$('input[type=radio][name=tp_cd]').on('click', function() {

var chkValue = $('input[type=radio][name=tp_cd]:checked').val();

if (chkValue == '1') {

$('#POP1').css('display', 'block');

$('#POP2').css('display', 'none');

return false;

} else if (chkValue == '2') {

$('#POP1').css('display', 'none');

$('#POP2').css('display', 'block');

return false;

}

});

위와 같은 방법으로 작성하면 된다.

jquery는 css에 display: none; 일 경우 화면에서 보여지지 않고, display: block; 일 경우 화면에 보여지는 것을 이용한 것이다.

POP2의 영역이 처음부터 노출되는 것을 막기 위해서는 HTML에서 스타일을 주면 된다.

함수 안에 return false;를 입력하게 되면 2번을 선택하더라도 기존에 체크되어있던 라디오버튼 1번에 계속 체크가 되어있다. (DIV는 POP2가 보이게된다.)

이를 해결하기 위해서는 간단하게 return false; 를 지우면 된다.