如果我有两个选项的代码，单选按钮的结果将无法正常工作
Result of the radio buttons does not work properly if I have the code for both of the options
我有一个问题，我有两个单选按钮，如果您在医生单选按钮上选择，它将显示需要为医生显示的所有下一个字段，如果您选择患者单选按钮，我们希望发生同样的情况，例如，如果我有患者的代码，我这样做可以正常工作，但是如果我也为医生编写代码，它会破坏两个选项的结果这是代码...
<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="answerswer" value="Doctor" />
Patient <input type="radio" name="answerswer" 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/这里有一个链接，看看如果 A 同时拥有两个代码会发生什么
假设您可以编辑此表单的 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="answerswer" value="Doctor" />
Patient
<input type="radio" name="answerswer" 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都是无效的。
相关文章：
- 函数hide(）、prev(）、show(）被组装以获得所需的结果，但无法理解其工作原理
- 无法从IE中的data.responseText获取结果，但在其他浏览器中工作
- Javascript表排序工作得很好，但对所有索引进行迭代会得到不同的结果
- Javascript 不工作，结果打印后浏览器仍在加载
- 当我在Javascript中的.exec(）结果上使用.index时，它是如何工作的
- 序列化方向结果到 JSON 发送到我的网络服务无法正常工作
- 异步功能在预期结果时停止工作
- 通过输入键(不起作用）或搜索按钮(工作）查询结果
- 如果我有两个选项的代码，单选按钮的结果将无法正常工作
- 谷歌博主的编号页面导航无法在搜索结果页上工作
- jquery插件 - 工作，但在调试时，结果甚至在到达该行之前就显示出来了
- 将结果从.html(或innerHtml）输入到inArray并使其工作
- I'我试图让jquery在我的chrome扩展的background.js中工作，结果成功了;不起作用.为什么?
- 2个SQL查询.两者独立工作.当我把它们放在一起时，第一个查询的结果变量是空的.为什么?
- Meteor findOne查询在一个模板助手中返回未定义的结果.在其他模板助手中，同样的查询也能很好地工作
- 显示返回结果计数的函数是'没有按预期工作
- .find("tagname")空结果(偶尔在Chrome中工作)
- 调用ASP中控制器的ActionMethod.. NET MVC从Javascript，结果在Excel工作表保存
- 数据显示更新数据结果，但更新数据结果是不工作的PHP
- PHP正则表达式不工作，返回主题字符串而不是正则表达式结果
