1

Tengo un ejemplo sencillo para mostrar o no un <div id="oculto"></div> al dar click en un input checkbox usando javascript. Pero tengo la peculiaridad que cuando realizo el evento click no se ejecuta la acción de mostrar lo que esta oculto. Este input de type="checkbox" tiene un class="flat" que permite darle mejor apariencia al checkbox; y me he dado cuenta que cuando quito este class="flat" de Bootstrap la función que se ejecuta con el evento $('#es_titulo').click(function (){}); funciona perfectamente.

Quizás sea algún detalle del cual no me estoy percatando y resulte muy sencilla la solución, pero dejo el código buscando alguna sugerencia.

El checbox:

    <div class="checkbox">
            <label>
                <input type="checkbox" class="flat" id="es_titulo" > Proceso de T&iacute;tulo
            </label>
        </div>

<div class="col-xs-12" style="padding-top: 2%; display: none;" id="caja_bolsa">
  
   
</div>

La función que utilizo para mostrar:

    $('#es_titulo').click(function (){

        if ($('#es_titulo').prop('checked')) {

            $('#caja_bolsa').show();
            
        } else {
          
            $('#caja_bolsa').hide();
        }
    });

3 respuestas 3

2

Dependiendo de la version de iCheck que estes usando poder usar esto

$('#es_titulo').on('ifChanged',function() {
    if ($('#es_titulo').prop('checked')) {
        $('#caja_bolsa').show();
    } else {
        $('#caja_bolsa').hide();
    }
});

Te paso los eventos que tiene iCheck en la documentacion de GitHub

introducir la descripción de la imagen aquí

1
  • 1
    Casualmente encontré investigando el uso del ifChanged y mi problema desaparecio Commented el 24 jun. 2022 a las 13:49
1
 $('#caja_bolsa').show();

y

$('#caja_bolsa').hide();

lo que hacen es poner y quitar el

display: none;

todo bien asta aquí

el problema se arregla si

ponemos bg-primary o cualquiera de sus variantes al elemento id="caja_bolsa"

<div class="col-xs-12 bg-primary" style="padding-top: 2%; display: none;" id="caja_bolsa">
</div>

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

1

Esta casilla de verificación es proporcionada por el complemento iCheck que, por alguna razón, se superpone a mi función. Después de descubrir esto, cambié mi función para usar las funciones del complemento iCheck. Así es como fue:

$('#es_titulo').on('ifChecked',function() {
        
        $('#caja_bolsa').show();
        
    });

Pero el problema que se me presenta ahora es que cuando desmarco el checkbox no me se me ejecuta $('#caja_bolsa').hide(); correctamente. Segui investigando y encontre la propiedad ifChanged y me funciono perfecto.

$('#es_titulo').on('ifChanged', function(event) {

        if(event.target.checked){
            $('#caja_bolsa').show();
        } else {
            $('#titulo').val('');
        }
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.