Question

我遇到了问题，我想在选择特定单选按钮时显示一些特定字段。我这样做了，我在这个页面上进行了测试（http://jsfiddle.net/niklakis/cw0qLnk5/5/），但是当我得到代码（如下所示）时，当我选择单选按钮时，它没有显示特定的字段。你能帮帮我吗？

这是整个代码......

<html>
    <head>
    <script src="jquery-1.11.2.min.js"></script>

    <script>
    $("input[type='radio']").change(function () {

        if ($(this).val() == "Doctor") {
            $("#DoctorRegister").show();
        } else {
            $("#DoctorRegister").hide();
        }
        if ($(this).val() == "Patient") {
            $("#PatientGM").show();
            $("#PatientGF").show();
            $("#PatientAge").show();
            $("#SelectDisease").show();
            $("#Male").show();
            $("#Female").show();
            $("#Age").show();
            $("#Disease").show();
        } else {
            $("#PatientGM").hide();
            $("#PatientGF").hide();
            $("#PatientAge").hide();
            $("#SelectDisease").hide();
            $("#Male").hide();
            $("#Female").hide();
            $("#Age").hide();
            $("#Disease").hide();
        }

    });</script>


    </head> 
    <body>
      <fieldset>
        <legend>Registration Form</legend>
        <label>First Name
            <input type="text" name="fname" required="required" />
        </label>
        <br/>
        <br/>
        <label>Last Name
            <input type="text" name="lname" required="required" />
        </label>
        <br />
        <br />
        <label>Username
            <input type="text" name="username" required="required" />
        </label>
        <br />
        <br />
        <label>Email
            <input type="text" name="email" required="required" />
        </label>
        <br />
        <br />
        <label>Password
            <input type="text" name="password" required="required" />
        </label>
        <br/><br/>
        User Type:
        <br/>
        Doctor <input type="radio" name="answer" value="Doctor" />
        Patient <input type="radio" name="answer" value="Patient" />
        <br/>
        <br/>
        <input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
        <br/>
        <br/>
        <label style="display:none;" id="Male">Male</label>
        <input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">

        <label style="display:none;" id="Female">Female</label>
        <input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
        <br/>
        <br/>
        <label style="display:none;" id="Age">Age:</label>
        <input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
        <br/>
        <br/>
        <label style="display:none;" id="Disease">Disease:</label>
        <select style="display:none;" id="SelectDisease">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        </select>
        <br/>
        <br/>
      </fieldset>
    </body>
</html>

Answer 1

您在呈现文档之前执行代码。之一：

将代码移至关闭正文标记或
将代码放在头部的document ready处理程序中：

$( document ).ready(function() {
    // your code here
});

<强> jsFiddle example

Answer 2

$("input[type='radio']").change()将触发所有类型单选按钮的输入。所以，试试：

$("input[type='radio'][name='answer']").change()

小提琴有效，但测试页面没有（缺少.ready处理程序）

2 个答案: