Home / Questions / 542587
Accepted
albertolg89
Asked: 2022-08-25 04:26:44 +0800 CST 2022-08-25 04:26:44 +0800 CST

Perform an action when an element with Bootstrap class="flat" is clicked

  • 772

I have a simple example to show or not a <div id="oculto"></div>when clicking on a input checkboxusing javascript. But I have the peculiarity that when I perform the event click, the action of showing what is hidden is not executed. This input type="checkbox"has a class="flat"that allows to give better appearance to the checkbox; and I have noticed that when I remove this class="flat"from Bootstrapthe function that is executed with the event it $('#es_titulo').click(function (){});works perfectly.

Perhaps it is some detail that I am not realizing and the solution is very simple, but I leave the code looking for some suggestion.

The checkbox:

    <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>

The function I use to display:

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

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

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

3 Answers

  1. Depending on the version of iCheck you are using you may be able to use this

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

    I pass you the events that iCheck has in the GitHub documentation

    enter image description here

    • 2
  2. Best Answer

    This checkbox is provided by the iCheck plugin which for some reason overlaps with my function. After discovering this, I changed my function to use the features of the iCheck plugin. This is how it went:

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

    But the problem that appears to me now is that when I uncheck checkboxit, it does not run $('#caja_bolsa').hide();correctly. I kept investigating and found the ifChanged property and it worked perfectly for me.

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

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

    Y

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

    what they do is put and remove the

    display: none;

    all good until here

    the problem is fixed if

    we put bg-primary or any of its variants to the element id="caja_bolsa"

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

    enter image description here enter image description here

    • 1