我有一个问题，我有两个单选按钮，如果您选择“医生”单选按钮，它将显示需要向医生显示的所有下一个字段，如果您选择“患者”单选按钮，我们希望发生同样的情况按钮，如果我有患者的代码，我这样做就可以正常工作，但如果我也为医生编写代码，它就会破坏这两个选项的结果 这是代码...
<html>
<head>
<script src="jquery-1.11.2.min.js"></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/>
<!--DOCTOR OPTIONS
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label style="display:none;" id="Specialty">Specialty:</label>
<select style="display:none;" id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="ID">Doctor ID:</label>
<input style="display:none;" type="text" name="Doctor_ID" id="Doctor_ID" />
-->
<!--PATIENT OPTIONS -->
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGender" 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/>
<label style="display:none;" id="SPID">SPID:</label>
<input style="display:none;" type="text" name="PatientSPID" id="PatientSPID" />
</fieldset>
</body>
<script>
$("input[type='radio'][name='answer']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorGM").show();
$("#DoctorGF").show();
$("#DoctorAge").show();
$("#SelectSpecialty").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#ID").show();
$("#Doctor_ID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#ID").hide();
$("#Doctor_ID").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#SPID").show();
$("#PatientSPID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#SPID").hide();
$("#PatientSPID").hide();
}
});</script>
</html>
PS 1:我为医生注释了代码，以便为患者正常工作 PS 2:http://jsfiddle.net/niklakis/qp7s409a/24/这是一个链接，可以查看如果同时拥有这两个代码会发生什么
最佳答案
假设您可以编辑此表单的 HTML，您应该将额外的字段放入单独的 div 中，并仅隐藏这些 div。然后，您的 jQuery 也会变得更加简单。
现在，在这个 jQuery 中，我们所做的是默认隐藏两个“扩展”部分。这就是 $("[id^=expand]").hide() 行。其作用是选择 id 以 expand 开头的所有元素并隐藏它们。
然后，我们选择与单击的单选关联的扩展部分并显示它。
$("input[type='radio'][name='answer']").change(function() {
$("[id^=expand]").hide();
$("#expand" + $(this).val()).show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
User Type:
<br/>Doctor
<input type="radio" name="answer" value="Doctor" />
Patient
<input type="radio" name="answer" value="Patient" />
<!--DOCTOR OPTIONS -->
<div id="expandDoctor" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<label id="Female">Female</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label id="Specialty">Specialty:</label>
<select id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="ID">Doctor ID:</label>
<input type="text" name="Doctor_ID" id="Doctor_ID" />
</div>
<!--PATIENT OPTIONS -->
<div id="expandPatient" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="PatientG" value="male" id="PatientGM">
<label id="Female">Female</label>
<input type="radio" name="PatientG" value="male" id="PatientGF">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label id="Disease">Disease:</label>
<select 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/>
<label id="SPID">SPID:</label>
<input type="text" name="PatientSPID" id="PatientSPID" />
</div>
</fieldset>但是，您遇到了问题，因为您试图显示和隐藏实际上不存在的元素。例如，您试图显示/隐藏 #DoctorGM，但它不存在，您只有 #DoctorG。您也应该更改这些 id，因为在 HTML 中任何元素共享相同的 id 都是无效的。
关于javascript - 如果我有两个选项的代码，单选按钮的结果将无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27642121/