javascript jQuery -选中复选框时隐藏/显示div

vhmi4jdf  于 2023-02-11  发布在  Java
关注(0)|答案(5)|浏览(162)

我有一个jquery函数,当某些复选框被选中或未选中时,它可以显示或隐藏div,使用"change"函数可以很好地工作。因此,如果复选框以前已经被选中,相应的div就不会显示。我如何才能改变这个代码使其工作呢?
我的代码在这里:

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

2vuwiymt1#

这是非常规范的。
我会使用data-id而不是data-name:

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

如果您不喜欢混合DOM和jQuery访问,那么

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

hfsqlsce2#

我假设您的问题是如何显示/隐藏在加载页面时已经选中/未选中的复选框的div。
您可以通过将用于change()的同一个函数传入each()方法来实现这一点,该方法将遍历每个复选框并运行该函数。

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

演示
x一个一个一个一个x一个一个二个x

ewm0tg9j

ewm0tg9j3#

您可以使用以下命令获取数据,然后根据复选框值显示或隐藏div

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

})

您可以看到正在工作的fiddle

oyt4ldly

oyt4ldly4#

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

        });
    });
v9tzhpje

v9tzhpje5#

试试这边。

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

相关问题