Tengo una casilla de verificación que, cuando está marcada , muestra algo de contenido en mi página. Si lo desmarco, el contenido se oculta .
Estoy tratando de aislar el comportamiento interno de esa función en otra función para poder reutilizarla:
$('#some-id').change(function(){ if ($(this).is(":checked")){ show(); } else { hide(); } });Esto es lo que he probado:
$('#some-id').change(function(){ toggle(); }); function toggle() { $(this).is(":checked") ? show() : hide(); }Pero ahora solo funcionaba para ocultar el contenido al desmarcar el campo, pero ya no muestra el contenido cuando el campo se vuelve a marcar.
¿Hay algún error de sintaxis con eso?
Simplemente pase un objeto de casilla de verificación a la función de alternancia, de lo contrario, el código no sabrá qué alternar.
let $checkBox = $('#somecheckbox'); //get the checkbox $checkBox.change(function (){ toggle($checkBox) //pass the checkbox to function }); function toggle($checkBox) { $checkBox.is(":checked") ? show() : hide(); }también podrías hacer eso con vanilla js y sin jQuery con bastante facilidad:
let checkbox = document.getElementById('someId'); checkbox.addEventlistener('change', () => {toggle(checkbox)}); function toggle(checkbox) { checkbox.checked ? hide() : show(); }Cambie $(this) a $('#some-id') en function toggle()
$('#some-id').change(function() { toggle(); }); function toggle() { $('#some-id').is(":checked") ? show() : hide(); }