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

Fiddle works but test page doesn't (missing .ready handler)

本文关键字：缺少 ready 处理 程序 无效 有效 测试 小提琴      更新时间：2023-09-26

我有一个问题，我想在选择特定的单选按钮时显示一些特定的字段。我这样做并在此页面上进行了测试（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="answerswer" value="Doctor" />
        Patient <input type="radio" name="answerswer" 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>

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

  1. 将代码移动到文档末尾的结束正文标记之前，或者
  2. 将代码放在头部的文档就绪处理程序中，如下所示：

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

js小提琴示例

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

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

相关文章：