Creé un cuestionario que permite a los usuarios responder SÍ o NO a cada pregunta. si se hace clic en NO, el campo se oculta. Pero si se hace clic en SÍ, quiero mostrar un campo oculto que tiene más instrucciones para cada pregunta.
El siguiente código funciona para la primera pregunta, pero no para la siguiente.
¿Cómo puedo modificar el guión para que funcione con todas las preguntas del cuestionario?
function showhideInfo() { if (document.getElementById('inlineRadio1').checked) { document.getElementById('reqdfield').style.display = 'block'; } else document.getElementById('reqdfield').style.display = 'none'; }Aquí está mi código html
<div class="input-group"> <b><label class = "label">Have you attended this course before</label></b> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="YES" onclick="showhideInfo()"> <label class="form-check-label" for="inlineRadio1">YES</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="NO" onclick="showhideInfo()"> <label class="form-check-label" for="inlineRadio2">NO</label> </div> <div class="regdInfo" id="reqdfield" style="display:none"> You will need to provide details of previous course attended. </div> </div>Los identificadores son (se supone que son) únicos en una página web. En particular, getElementById devolverá un único elemento, incluso si hubiera varios elementos con el mismo ID en el documento.
Utilice un selector basado en la clase en su lugar. P.ej:
document.querySelectorAll('.reqdInfo').forEach ( pe => { pe.style.display = 'none'; /* or 'block' */ });