◽ HTML & CSS & JS, jQuery

[jQuery - 기능 - (9) ] .hide() / .show() 라디오 버튼 선택에 따른 div 보이기/숨기기


참고 : https://whitekeyboard.tistory.com/515 ( select box선택에 따라 다음 select box 영향 주는 방법. )


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<!-- 부트 스트랩 CDN -->    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"><!-- 부가적인 테마 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script><!-- 합쳐지고 최소화된 최신 자바스크립트 -->
 
 
<input type="radio" id="aaa" name="abcd" value="00" onchange="setDisplay()"> AAA
<input type="radio" id="bbb" name="abcd" value="10" onchange="setDisplay()"> BBB
 
 
<div id="divId">Test~~~~~~~~~~~~~~~~~~~</div>
 
<script>
function setDisplay(){
    if($('input:radio[id=aaa]').is(':checked')){
        $('#divId').hide();
    }else{
        $('#divId').show();
    }
}
 
 
</script>
 
 

코드 결과 보기 : https://www.w3schools.com/code/tryit.asp?filename=G7H8QYG5XLFR

BBB선택시 나타남

AAA선택시 사라짐

푸터바