为什么这个jQuery没有切换到Radio Selection？

Currently, this is toggling, but it is not toggling the right fields when the individual "Professor" or "Course" Radio buttons are selected. Anyone have some insight why this isnt working?

Currently its showing all the fields when "Course" radio is selected and when professor is selected they all go away

Thanks!

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
$(document).ready(function() {
    $(':radio[value="Coursee"]').click(function() {
        $('#courseFields').toggle(':not(:radio[value="Professor"]:checked)');
    });
    $(':radio[value="Professor"]').click(function() {
        $('#ProfFields').toggle(':not(:radio[value="Coursee"]:checked)');
    });
});
</script>
<?php
require_once('inc/dbc1.php');
$pdo = new PDO('mysql:host=ureviewdu.db.6511651.hostedresource.com;dbname=ureviewdu', $username, $password);
$pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth = $pdo->prepare('
    SELECT name
    FROM Department
    ;');
$sth->execute(array());
?>
<div id="popup_name" class="popup_block">
    <h2 style="padding:0; margin:0;">Add a:</h2><br>
    <form action="inc/add_p_c_validate.php" method="post" id="addition"> 
        Professor<input type="radio" name="addType" value="Professor" />
        &nbsp;&nbsp;Course<input type="radio" name="addType" value="Coursee" /> 

        <div id="courseFields">
            <br>Course: <input type="text" name="name" style="width:385px;" /><br> 
            Department: <select name="deptName" id="deptName" style="width:350px;">
                                    <?php while($row = $sth->fetch(PDO::FETCH_ASSOC)) {echo "<option>".$row['name']." "."</option>";} ?></select>   
            Email: <input type="text" name="email"  class="l" />
         </div><!--/courseFields-->
         <div id="ProfFields">
         <br>First Name: <input type="text" name="name" style="width:385px;" /><br>
         <br>Last Name: <input type="text" name="name" style="width:385px;" /><br>
          Department: <select name="deptName" id="deptName" style="width:350px;">
         <?php while($row = $sth->fetch(PDO::FETCH_ASSOC)) {echo "<option>".$row['name']." "."</option>";} ?></select>   
         </div><!--/ProfFields-->
        <input type="submit" name="submit" /> 
    </form> 
</div><!--popup_name-->

I think you are trying to use the .toggle( showOrHide ) version of toggle, in which case you should pass a boolean value to show/hide the element hence you need to use .length>0 for $(':not(:radio[value="Professor"]:checked)') or $(':not(:radio[value="Course"]:checked)')

Try this:

<script type="text/javascript">
    $(document).ready(function() {
        $(':radio[name="addType"]').click(function() {
            $('#courseFields').toggle($(':radio[value="Professor"]:checked').length == 0);
            $('#ProfFields').toggle($(':radio[value="Course"]:checked').length == 0);
        });
    });
    </script>

First you need to hide both the container DIVs:

 $("#ProfFields,#courseFields").hide();

Then do a simplified version of what you already have:

 $("input:radio[name='addType']").click(function(){
      var profFields = ($(this).val()=="Professor");
      $("#ProfFields").toggle(profFields); 
      $("#courseFields").toggle(!profFields);
 });

Here's a live example: http://jsfiddle.net/WMvtG/