[英]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="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是无效的。
Jquery 根据单选按钮和 select 选项显示和隐藏 div
[英]Jquery show and hides divs based on both radio buttons and select options
为什么即使我尝试了类型和方法选项，但在指定POST时，我的Ajax代码仍会不断触发GET请求？
[英]Why does my ajax code keep firing a GET request when I specify POST even when I have tried both type and method options?
我必须使用以下代码的javascript验证单选按钮的表单
[英]I have to validate my form for radio buttons using javascript for my code given below
Javascript HTML 单选按钮 - 在 web 浏览器中无法正确呈现代码的帮助
[英]Javascript HTML radio buttons - assistance with code not rendering properly in web browser
如何让 addEventListener 点击条件与 hbs 中的单选按钮一起工作
[英]How to have an addEventListener click conditional work with radio buttons in hbs
我写了两个 js 脚本，它们都可以工作，但问题是只有代码中第二个可以工作
[英]I have wrote two js scripts, both of them work but the problem is only the one placed second in the code will work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.