更改基於單選按鈕的數據

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 sample

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