[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선택시 사라짐
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
[jQuery] 다음 API 주소(한글) ㅡ>> 좌표(위도, 경도) (0) | 2019.09.15 |
---|---|
[JavaScript - (9) ] 이미지 원본사이즈에 맞게 새창 띄우기 (0) | 2019.09.03 |
[jQuery - 기록] 오류 : Uncaught ReferenceError: ... is not defined - 파라미터의 스트링값이 명령어로 인식 될 시 (0) | 2019.08.30 |
[jQuery - 기능 - (8) ] .change() - 작동 시 변경되는 이벤트 (0) | 2019.08.26 |
[HTML] <input>태그 값 못 쓰게 막기. readonly, disabled (0) | 2019.08.26 |
[jQuery 기록] 반복문에서 고유값 불러오는 값이 항상 일정한 문제. (0) | 2019.08.21 |
[jQuery - 기능 - (7) ] .serialize() → 폼 요소 집합을 인코딩 - jQuery제공 메서드 (0) | 2019.08.17 |