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>

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

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

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

 상품1 리스트
 상품2 리스트