根據單選按鈕更改數據

Question

如何在JavaScript中做到這一點，當選中單選按鈕時，只有某些字段會顯示出來才能輸入？ 請顯示工作（最好是使用JSFiddle）：）

    <form action="inc/add_p_c_validate.php" method="post"> 
    Professor<input type="radio" name="addType" value="Professor" />
    &nbsp;&nbsp;Course<input type="radio" name="addType" value="Course" /> 
    <br><br>Name: <input type="text" name="name" /><br> 
    Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
    Email: <input type="text" name="email" /><br>
    <input type="submit" name="submit" /> 
</form> 

Answer 1

設定onclick的事件radiobuttons來調用，將檢查功能radiobutton狀態，然后會顯示或隱藏指定的div元素里面的表單元素。

jsfiddle示例

<script language="javascript">
    function ChangeForm()
{
    if(document.getElementById('Professor').checked)
        document.getElementById('fieldset1').style.display = "inline";
    else
        document.getElementById('fieldset1').style.display = "none";


    if(document.getElementById('Course').checked)
        document.getElementById('fieldset2').style.display = "inline";
    else
        document.getElementById('fieldset2').style.display = "none";
}
</script>


<form action="inc/add_p_c_validate.php" method="post">
    Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
    &nbsp;&nbsp;Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
    <br><br>
    <div id="fieldset1">Name: <input type="text" name="name" /><br>
        Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
    <div id="fieldset2">Email: <input type="text" name="email" /><br>
        <input type="submit" name="submit" /> </div>
</form>