2017년 8월 11일 – 지엘디지털

라디오버튼을 이용한 div 보이기

JavascriptBy 관리자 2017년 8월 11일

Jquery 버전

<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>

<input id='watch-me' name='test' type='radio' value="a" />Show Div

<br />

<br />

</form>

<div id='show-me' style='display:none'>Hello</div>

<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>

$("input[name='test']").click(function () {

$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');

});

</script>

Show Div Hello 혹은 원시적으로 ….. 근데 이건 이 페이지에서 실행이 안됨 실행 URL Here

<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>

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/>

1. 상품 1-1 <br/>

2. 상품 1-2 <br/>

3. 상품 1-3 <br/>

</div>

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