El resultado de los botones de opción no funciona correctamente si tengo el código para ambas opciones

Tengo un problema, tengo dos botones de radio que, si seleccionas el botón de radio Doctor, mostrarán todos los campos siguientes que se necesitan mostrar a los médicos y lo mismo que queremos que suceda si seleccionas el botón de opción del paciente, lo hice funcionar bien si tengo el código para el paciente, por ejemplo, pero si escribo el código también para el médico, destruye el resultado de ambas opciones AQUÍ ES EL CÓDIGO …

     
Registration Form









User Type:
Doctor Patient

<!--DOCTOR OPTIONS



A B C D

-->



A B C D

$("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(); } });

PD 1: HE COMENTADO EL CÓDIGO DEL DOCTOR PARA QUE FUNCIONE CORRECTAMENTE PARA EL PACIENTE PS 2: http://jsfiddle.net/niklakis/qp7s409a/24/ AQUÍ HAY UN ENLACE PARA VER QUÉ SUCEDE SI TENGO AMBOS EL CÓDIGO

Asumiendo que puede editar el HTML de este formulario, debe colocar los campos adicionales dentro de div separadas y ocultar solo esos divs. Entonces, tu jQuery se vuelve mucho más simple, también.

Ahora en este jQuery, lo que estamos haciendo es ocultar ambas secciones de “expansión” de forma predeterminada. Esa es la línea $("[id^=expand]").hide() . Lo que hace es seleccionar todos los elementos cuya id comienza con expand y ocultarlos.

Luego, seleccionamos la sección de expansión asociada con la radio en la que se hizo clic y la mostramos.

 $("input[type='radio'][name='answer']").change(function() { $("[id^=expand]").hide(); $("#expand" + $(this).val()).show(); }); 
  
User Type:
Doctor Patient