Question

目前，这是切换，但是当选择单独的“教授”或“课程”单选按钮时，它不会切换正确的字段。任何人都有一些见解，为什么这不起作用？

目前，当选择“课程”广播并且选择教授时，它会显示所有字段

谢谢！

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

我认为您正在尝试使用.toggle（showOrHide）版本的切换，在这种情况下，您应该传递一个布尔值来显示/隐藏元素，因此您需要使用.length＆gt; 0 for $（'：not not （：radio [value =“Professor”]：checked）'）或$（'：not（：radio [value =“Course”]：checked）'）

试试这个：

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

Answer 2

首先，您需要隐藏容器DIV：

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

然后做一个你已经拥有的简化版本：

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

以下是一个实例：http://jsfiddle.net/WMvtG/

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

2 个答案: