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

Question

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

Answer 1

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>