Tengo un formulario con botones de radio y me gustaría mostrar/ocultar un div cuando las personas hacen clic en cada una de las opciones de radio. El siguiente código funciona per se, pero tiene errores, es decir, funcionará si actualizo la página con fuerza, pero otras veces solo mostrará/ocultará el div pero no alternará entre las entradas de radio. Por lo general, llamo a esta función dentro de un pero esta es la primera vez que intento que se llame cuando un usuario hace clic en un elemento de formulario. ¿Hay una mejor manera de llamar a la función para que siempre funcione como se esperaba?
<label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag1">No <input id="form18" type="radio" name="TaxAgent" value="0"> <span class="rbutton"></span> </label> <label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag2">Yes <input id="form19" type="radio" name="TaxAgent" value="1"> <span class="rbutton"></span> </label> Vea el fragmento de código de muestra a continuación. En él, el elemento de form envuelve dos elementos de input de radio del mismo nombre, y puede usar JavaScript para escuchar su evento de change en lugar de detectar mousedown individual. Esto también permitirá a los usuarios usar el teclado para alternar entre radios.
const form = document.querySelector('form'); const div = document.querySelector('.content'); form.addEventListener('change', e => { // Do whatever you need to do to toggle const toggleStatus = e.target.value === "yes" ? "Toggle On" : "Toggle Off"; div.innerText = toggleStatus; }); <form> <label for="no"><input type="radio" id="no" name="toggle" value="no">No</label> <label for="yes"><input type="radio" id="yes" name="toggle" value="yes">Yes</label> </form> <div class="content" style="padding: 20px; margin-top: 20px; box-shadow: 0 1px 15px rgba(0,0,0,.2); width: 150px;"> Unselected </div> function toggleDiv(toggleType) { const el = document.getElementById("div_content"); if(toggleType === 'yes') el.style.display="block"; if(toggleType === 'no') el.style.display="none"; } <input type="radio" onChange="toggleDiv('yes')" name="Yes" id="yes" checked="true"> <label for="yes" >YES</label> <input type="radio" onChange="toggleDiv('no')" name="Yes" id="no"> <label for="no">NO</label> <div id="div_content"> DIV Content </div>