Así que estoy creando un formulario en HTML que utiliza muchas casillas de verificación y divisiones ocultas. Ahora mismo estoy usando
function HideDiv1() { var checkBox = document.getElementById("Check1"); var div = document.getElementById("Div1"); if (checkBox.checked == true) { div.style.display = "block"; } else { div.style.display = "none"; } } <input type="checkbox" id="Check1">CheckBox to show Div1 <div id="Div1" style="display: none;">I should be hidden, assuming the author didn't mess up!</div>Para ocultar cada div en función de la casilla de verificación adecuada. Pero esto significa que estoy copiando y reescribiendo esta función cada vez y la sección donde me gusta mantener mis funciones se está volviendo bastante grande. Me preguntaba si había una manera más fácil de hacer esto de modo que solo necesitaría una función y podría mostrar y ocultar dinámicamente Divs sin necesidad de copiar y reescribir esta función cada vez.
(Si hay alguna solución fácil de JQuery para esto: tenga en cuenta que no tengo idea de cómo usar JQuery)
Esto puede ser un duplicado, vi la respuesta una vez antes en el pasado, pero no tengo idea de cómo encontrarla de nuevo :(
Puede usar atributos de datos para identificar qué div mostrar cuando se cambia la casilla de verificación.
Puede hacer esto escuchando el evento de change en cada casilla de verificación y alternando el div correspondiente con jQuery.toggle :
$('input[type=checkbox]').change(function(){ $('div[data-id='+$(this).data('target')+']').toggle() }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" data-target="1">CheckBox to show Div1 <div style="display: none;" data-id="1">Div1</div> <br/> <input type="checkbox" data-target="2">CheckBox to show Div2 <div style="display: none;" data-id="2">Div2</div>Implementación de vainilla JS:
document.addEventListener('click', function(e){ if(e.target.matches('input[type=checkbox]')){ let target = document.querySelector('div[data-id="'+e.target.dataset.target+'"]'); target.style.display = target.style.display == "none" ? "block" : "none"; } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" data-target="1">CheckBox to show Div1 <div style="display: none;" data-id="1">Div1</div> <br/> <input type="checkbox" data-target="2">CheckBox to show Div2 <div style="display: none;" data-id="2">Div2</div>Agregaría un atributo onchange a la casilla de verificación para llamar a una sola función llamada hideDiv y pasarle dos argumentos que son las identificaciones de la casilla de verificación y el div que está ocultando con esa casilla de verificación:
onchange="hideDiv("check1","div1")"... luego hideDiv usa los argumentos que se le pasan para alternar el div correcto:
function hideDiv(checkId, divId) { const checkbox = document.getElementById(checkId) const div = document.getElementById(divId); if (checkBox.checked == true) { div.style.display = "block"; } else { div.style.display = "none"; } }Acostúmbrese a usar let para las variables que necesita cambiar y const para las variables que no cambiarán el valor en lugar de var .