如果我有这两个选项的代码，单选按钮的结果无法正常工作 [英] 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>注册表单< / legend>
< label>名字
< input type =textname =fnamerequired =required/>
< / label>
< br />
< br />
< label>姓氏
< input type =textname =lnamerequired =required/>
< / label>
< br />
< br />
< label>用户名
< input type =textname =usernamerequired =required/>
< / label>
< br />
< br />
< label>电子邮件
< input type =textname =emailrequired =required/>
< / label>
< br />
< br />
< label>密码
< input type =textname =passwordrequired =required/>
< / label>
< br />< br />
用户类型：
< br />
Doctor< input type =radioname =answervalue =Doctor/>
Patient< input type =radioname =answervalue =Patient/>
< br />
< br />
<！ - 医生选项
< label style =display：none; ID = 男性 >男性< /标签>
< input style =display：none; type =radioname =DoctorGvalue =maleid =DoctorGM>
< label style =display：none; ID = 女性 >女< /标签>
< input style =display：none; type =radioname =DoctorGvalue =maleid =DoctorGF>
< br />
< br />
< label style =display：none; ID = 年龄 >年龄：其中/标签>
< input style =display：none; type =textname =DoctorAgeid =DoctorAge/>
< br />
< br />
< label style =display：none; ID = 特色 >特色：其中/标签>
< 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>医生ID：< / label>
< input style =display：none; type =textname =Doctor_IDid =Doctor_ID/>
- >
<！ - - 患者选项 - >
< label style =display：none; ID = 男性 >男性< /标签>
< input style =display：none; type =radioname =PatientGendervalue =maleid =PatientGM>
< label style =display：none; ID = 女性 >女< /标签>
< input style =display：none; type =radioname =PatientGendervalue =maleid =PatientGF>
< br />
< br />
< label style =display：none; ID = 年龄 >年龄：其中/标签>
< input style =display：none; type =textname =PatientAgeid =PatientAge/>
< br />
< br />
< label style =display：none; ID = 疾病 >疾病：其中/标签>
< 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：其中/标签>
< input style =display：none; type =textname =PatientSPIDid =PatientSPID/>
< / fieldset>
< / body>
< script> （$（this）.val（）=
$（input [type ='radio'] [name ='answer']）。 （＃DoctorGM）。show（）;
$（＃DoctorGF）。show（）;
$（＃DoctorAge）。 show（）;
$（＃SelectSpecialty）。show（）;
$（＃Male）。show（）;
$（＃Female）。show ）;
$（＃Age）。show（）;
$（＃Disease）。show（）;
$（＃ID）。
$（＃Doctor_ID）。show（）;
} else {
$（＃PatientGM）。hide（）;
$（＃PatientGF） .hide（）;
$（＃PatientAge）。hide（）;
$（＃SelectDisease）。hide（）;
$（＃Male）。hide （）;
$（＃女）。hide（）;
$（＃Age）。hide（）;
$（＃Disease）。hide（） ;
$（＃ID）。hide（）;
$（＃Doctor_ID）。hide（）;
}
if（$（this）.val （）==Patient）{
$（＃PatientGM）。show（）;
$（＃PatientGF）。show（）;
$（＃PatientAge ） 。显示（）;
$（＃SelectDisease）。show（）;
$（＃男）。show（）;
$（＃女）。show（）;
$（＃Age）。show（）;
$（＃Disease）。show（）;
$（＃SPID）。show（）;
$（＃PatientSPID）。show（）;
} else {
$（＃PatientGM）。hide（）;
$（＃PatientGF）。hide（）;
$（＃PatientAge）。hide（）;
$（＃SelectDisease）。hide（）;
$（＃男）。hide（）;
$（＃女）。hide（）;
$（＃Age）。hide（）;
$（＃Disease）。hide（）;
$（＃SPID）。hide（）;
$（＃PatientSPID）。hide（）;
}
}）;< / script>
< / html>
PS 1：我为医生写了代码以便为患者正常工作
PS 2： http://jsfiddle.net/niklakis/qp7s409a/24/ 这里是一个链接，看看有什么发生，如果有代码
解决方案
假设你可以编辑这个表单的HTML，你应该将额外的字段放在单独的 div s中并隐藏这些div。然后，你的jQuery也变得简单了。
现在在这个jQuery中，我们正在做的是默认隐藏两个扩展部分。这就是 $（[id ^ = expand]）。hide（）这一行。它的作用是选择 id 以展开开头并隐藏它们的所有元素。
然后，我们选择与点击收音机关联的扩展部分并显示它。
$（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>用户类型：< br /> Doctor< input type =radioname =answervalue =Doctor/> Patient< input type =radioname =answervalue =Patient/> <！ - 医生选项 - > < div id =expandDoctorstyle =display：none;> < label id =Male>男性< / label> < input type =radioname =DoctorGvalue =maleid =DoctorG> < label id =Female>女性< / label> < input type =radioname =DoctorGvalue =maleid =DoctorG> <峰; br /> <峰; br /> < label id =年龄>年龄：< / label> < input type =textname =DoctorAgeid =DoctorAge/> <峰; br /> <峰; br /> < label id =专业>专业：< / label> < select id =SelectSpecialty> < option value =A> A< / option> < option value =B> B< / option> < option value =C> C< / option> < option value =D> D< / option> < /选择> <峰; br /> <峰; br /> < label id =ID>医生ID：< / label> < input type =textname =Doctor_IDid =Doctor_ID/> < / DIV> <！ - 患者选项 - > < div id =expandPatientstyle =display：none;> < label id =Male>男性< / label> < input type =radioname =PatientGvalue =maleid =PatientGM> < label id =Female>女性< / label> < input type =radioname =PatientGvalue =maleid =PatientGF> <峰; br /> <峰; br /> < label id =年龄>年龄：< / label> < input type =textname =PatientAgeid =PatientAge/> <峰; br /> <峰; br /> < label id =疾病>疾病：< / label> < select id =SelectDisease> < option value =A> A< / option> < option value =B> B< / option> < option value =C> C< / option> < option value =D> D< / option> < /选择> <峰; br /> <峰; br /> < label id =SPID> SPID：< / label> < input type =textname =PatientSPIDid =PatientSPID/> < / div>< / fieldset>
有你的问题，因为你试图显示和隐藏实际上并不存在的元素。例如，你试图显示/隐藏 #DoctorGM ，这个不存在，你只有 #DoctorG 。您应该更改这些 id s，因为任何元素在HTML中共享相同的 id 是无效的。 / p>
I have a problem, i have two radio buttons which if you select on the Doctor radio button it will display all the next fields which are needed to show for the doctors and the same we want to happen if you select the patient radio button , i did it to work fine if I have the code for the patient for example but if i write the code also for the doctor it destroy the result of the both options HERE IS THE CODE...
<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: I COMMENTED THE CODE FOR THE DOCTOR IN ORDER TO WORK PROPERLY FOR THE PATIENT PS 2: http://jsfiddle.net/niklakis/qp7s409a/24/ HERE IS A LINK TO SEE WHAT HAPPENS IF A HAVE BOTH OF THE CODE
解决方案
Assuming you can edit the HTML of this form, you should put the extra fields inside separate divs and hide just those divs. Then, your jQuery becomes much simpler, too.
Now in this jQuery, what we're doing is hiding both of the "expansion" sections by default. That's the line $("[id^=expand]").hide(). What this does is select all elements whose id starts with expand and hides them.
Then, we select the expansion section associated with the clicked radio and show that.
$("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>
However, you were having your problem because you were trying to show and hide elements that weren't actually there. For example, you were trying to show/hide #DoctorGM, which doesn't exist, you only have #DoctorG. You should change those ids, too, because it's invalid to have any elements sharing the same id in HTML.
这篇关于如果我有这两个选项的代码，单选按钮的结果无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
