CODEWITHSUNDEEP
javascriptjquerycheckboxchecked
Flow
Flow

Reputation: 51

jQuery - hide / show divs when checkboxes are checked

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>

Upvotes: 1

Views: 7141

Answers (5)

mplungjan
mplungjan

Reputation: 177940

This is pretty canonical.

I would use data-id instead of data-name though:

$(function() {
  $('.my_features').on("change",function() { 
    $(`#${this.dataset.id}`).toggle(this.checked);
 }).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-id="div1">Div 1</label>
<label><input type="checkbox" checked class="my_features" data-id="div2">Div 2</label>
<div id="div1" class="toggleDiv">Div1 div</div>
<div id="div2" class="toggleDiv">Div2 div</div>

If you do not like mixing DOM and jQuery access then

$(`#${$(this).data('id')}`).toggle($(this).is(':checked'));

Upvotes: 5

Љубиша Ивановић
Љубиша Ивановић

Reputation: 84

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

        });
    });

Upvotes: 0

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

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

Upvotes: 0

Kiko Mesquita
Kiko Mesquita

Reputation: 457

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();
        }
    });
    });
});

Upvotes: -1

Patrick Evans
Patrick Evans

Reputation: 42736

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>

Upvotes: 2

Related Questions