最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery - hideshow divs when checkboxes are checked - Stack Overflow

programmeradmin2浏览0评论

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>

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>
Share Improve this question edited May 13, 2018 at 19:48 vsync 131k59 gold badges340 silver badges422 bronze badges asked May 13, 2018 at 16:20 FlowFlow 511 silver badge9 bronze badges 2
  • Change change to click – kiranvj Commented May 13, 2018 at 16:22
  • The result was the same with "click" ... – Flow Commented May 13, 2018 at 16:25
Add a ment  | 

5 Answers 5

Reset to default 5

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./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')); 
  

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

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

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

        });
    });

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

发布评论

评论列表(0)

  1. 暂无评论