jQuery - hide / show divs when checkboxes are checked

Question

I have a jquery function to show or hide divs when certain checkboxes are checked or unchecked and work fine using the "change" function. Therefore, if the checkbox has already been previously checked the corresponding div is not shown. How can I change this code to work?

My code is here:

<script>
    jQuery(document).ready(function($) {

        $('.my_features').change(function() {
            var checkbox = $(this);                 
            if( checkbox.is(':checked') ) {                       
                $( '#' + checkbox.attr('data-name') ).show();
            } else {                      
                $( '#' + checkbox.attr('data-name') ).hide();
            }
        });
    });
</script>

Answer 1

I am assuming your question was how to show/hide the divs for checkboxes that are already checked/unchecked upon loading the page.

You can do this by passing in the same function you are using for change() into the each() method, which will iterate over each checkbox and run the function.

jQuery(document).ready(function($) {
  $('.my_features').each(function(){
    var checkbox = $(this);
    //you can use data() method to get data-* attributes
    var name = checkbox.data('name');
    if( checkbox.is(':checked') ) {                       
      $( '#' + name ).show();
    } else {                      
      $( '#' + name ).hide();
    }          
  });
});

Demo

 function update(){ var checkbox = $(this); var name = checkbox.data('name'); if( checkbox.is(':checked') ) { $( '#' + name ).show(); } else { $( '#' + name ).hide(); } } //just setup change and each to use the same function $('.my_features').change(update).each(update);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="my_features" type="checkbox" data-name="first" /> <input class="my_features" type="checkbox" data-name="second" checked /> <input class="my_features" type="checkbox" data-name="third" checked /> <input class="my_features" type="checkbox" data-name="fourth" /> </div> <div id="first">First</div> <div id="second">Second</div> <div id="third">Third</div> <div id="fourth">Fourth</div>

Answer 2

This is pretty canonical:

 $(function() { $('.my_features').on("change",function() { $('#'+$(this).attr('data-name')).toggle(this.checked); // toggle instead }).change(); // trigger the change });

 .toggleDiv { display:none}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="checkbox" class="my_features" data-name="div1">Div 1</label> <label><input type="checkbox" checked class="my_features" data-name="div2">Div 2</label> <div id="div1" class="toggleDiv">Div1 div</div> <div id="div2" class="toggleDiv">Div2 div</div>

Answer 3

You can use the following to get the data and then show or hide the div based on the checkbox value

$(document).ready(function() {

  $('.my_features').on('click', function() {
    var checkbox = $(this);
    var div = checkbox.data('name');

    if (checkbox.is(':checked')) {
      $('#' + div).show();
    } else {
      $('#' + div).hide();
    }
  });

})

You can see a working fiddle

Answer 4

$(document).ready(function(){
        $('.my_features').change(function(){
            if(this.checked)
                $('#data-name').hide();
            else
                $('#data-name').show();

        });
    });

Answer 5

Try this way.

<script>
jQuery(document).ready(function($) {

    $('.my_features').each(function() {

        $(this).change(function() {

        var checkbox =  $(this);         
        if( checkbox.is(':checked') ) {                       
            $( '#' + checkbox.attr('data-name') ).show();
        } else {                      
            $( '#' + checkbox.attr('data-name') ).hide();
        }
    });
    });
});