라디오 버튼을 이용하여 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; 를 지우면 된다.
'알아가기 > 웹' 카테고리의 다른 글
touchstart, touchend 이벤트 이용해서 스와이프처럼 보여지기 (0) | 2023.02.02 |
---|---|
CSS를 이용하여 게시글 제목 말줄임표 사용하기 (0) | 2017.08.30 |
form에서 enctype="multipart/form-data"로 보낸 데이터를 request로 받기 (0) | 2017.08.11 |
JAVA에서 alert창 띄우기 (0) | 2017.08.11 |
JavaScript에서 URL Parameter 간단히 가져오기 (0) | 2017.04.19 |