라디오버튼을 이용한 div 보이기
Jquery 버전
|
1 2 3 4 5 6 7 8 9 |
<form id='form-id'> <input id='watch-me' name='test' type='radio' value="a" />Show Div <br /> <input name='test' type='radio' value="b" /> <br /> <input name='test' type='radio' value="c" /> </form> <div id='show-me' style='display:none'>Hello</div> |
|
1 2 3 4 5 6 |
<script type='text/javascript'> $("input[name='test']").click(function () { $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none'); }); </script> <script src="//code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> |
Show Div Hello 혹은 원시적으로 ….. 근데 이건 이 페이지에서 실행이 안됨 실행 URL Here
|
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 28 29 30 31 32 33 |
<script type="text/javascript"> function dispList(selectList) { var obj1 = document.getElementById("sc1_list"); // 상품1 리스트 var obj2 = document.getElementById("sc2_list"); // 상품2 리스트 if( selectList == "0" ) { // 상품1 리스트 obj1.style.display = "block"; obj2.style.display = "none"; alert( obj.style.display ) ; } else { // 상품2 리스트 obj1.style.display = "none"; obj2.style.display = "block"; } } </script> <input type="radio" name="choose" id="sc1" onclick="dispList('0');"> 학생 리스트 <input type="radio" name="choose" id="sc2" onclick="dispList('1');">선생님 리스트 <br/> <br/> <div id="sc1_list" style="display:none"> 1. 상품 1-1 <br/> 2. 상품 1-2 <br/> 3. 상품 1-3 <br/> </div> <div id="sc2_list" style="display:none"> 1. 상품 2-1 <br/> 2. 상품 2-2 <br/> 3. 상품 2-3 <br/> </div> |
상품1 리스트 상품2 리스트 1. 학생 1 2. 학생 2 3. 학생 3 1. 선생 1 2. 선생 2 3. 선생 3