Nuevo en programación y no he hecho mucho javascript antes solo html y css. Traté de encontrar ejemplos para hacer esto, pero todavía tengo problemas. Utilicé un código que encontré en línea e intenté modificarlo, pero todavía no puedo obtener el botón de opción "sí" para mostrar el div inferior llamado #current_school_details (que actualmente está configurado para mostrar: ninguno en css). Cualquier ayuda será apreciada.
function selectFunction() { var yes = document.getElementById("gridRadios1"); var current_school_details = document.getElementById("current_school_details"); if (option1.checked === true) { current_school_details.style.display = "block"; } else { current_school_details.style.display = "none"; } } <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="selectFunction();"> <label class="form-check-label" for="gridRadios1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="selectFunction();"> <label class="form-check-label" for="gridRadios2"> No </label> </div> </div> </div> <!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO--> <div id="current_school_details"> <h2>Current School Details</h2> <select class="form-control"> <option>--select--</option> <option>Twyford CofE High School</option> <option>Ealing Fields High School</option> <option>William Perkin CofE High School</option> </select> </div>En primer lugar, la opción 1 no está definida, lo que le dará un error de referencia. Y obtendrá un objeto de evento como un parámetro al que se puede acceder para ver si la radio que invocó esta devolución de llamada está marcada o no
function selectFunction(event) { var current_school_details =document.getElementById("current_school_details"); if (event.target.checked === true) { current_school_details.style.display = "block"; } else { current_school_details.style.display = "none"; } }Segundo ejemplo:
function selectFunction(event) { var current_school_details = document.getElementById("current_school_details"); var current_school_details_two = document.getElementById("current_school_details_two"); if (event.target.checked === true) { current_school_details.style.display = "block"; current_school_details_two.style.display = "none"; } else { current_school_details.style.display = "none"; current_school_details_two.style.display = "block"; } }Prueba algo como esto:
const toggleCurrentSchool = function(){ const current_school_details = document.getElementById("current_school_details"); const isCurrentStudent = document.getElementById("gridRadios1").checked; if (isCurrentStudent) { current_school_details.style.display = "block"; } else { current_school_details.style.display = "none"; } }; document.querySelectorAll("input[name='gridRadios']").forEach(el => { el.addEventListener("click", toggleCurrentSchool); }); toggleCurrentSchool(); <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1"> <label class="form-check-label" for="gridRadios1">Yes</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <label class="form-check-label" for="gridRadios2">No</label> </div> </div> </div> <!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO--> <div id="current_school_details"> <h2>Current School Details</h2> <select class="form-control"> <option>--select--</option> <option>Twyford CofE High School</option> <option>Ealing Fields High School</option> <option>William Perkin CofE High School</option> </select> </div>Esto usa document.querySelector que devuelve la primera coincidencia. Esto funciona porque la entrada de radio SÍ es la primera con la clase especificada.
También ejecuto la función en la carga de la página para ocultar la select inicialmente.
function selectFunction() { var yes = document.getElementById("gridRadios1"); var current_school_details = document.getElementById("current_school_details"); if (document.querySelector(".form-check-input").checked === true) { current_school_details.style.display = "block"; } else { current_school_details.style.display = "none"; } } selectFunction(); <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="selectFunction();"> <label class="form-check-label" for="gridRadios1"> Yes </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="selectFunction();"> <label class="form-check-label" for="gridRadios2"> No </label> </div> </div> </div> <!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO--> <div id="current_school_details"> <h2>Current School Details</h2> <select class="form-control"> <option>--select--</option> <option>Twyford CofE High School</option> <option>Ealing Fields High School</option> <option>William Perkin CofE High School</option> </select> </div>