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

【问题标题】：jQuery - hide / show divs when checkboxes are checkedjQuery - 选中复选框时隐藏/显示 div
【发布时间】：2018-05-13 16:20:03
【问题描述】：

我有一个 jquery 函数，可以在选中或取消选中某些复选框时显示或隐藏 div，并且使用“更改”功能可以正常工作。因此，如果该复选框之前已被选中，则不会显示相应的 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>

【问题讨论】：

将 change 更改为 click
结果和“点击”一样...

标签： javascript jquery checkbox checked

【解决方案1】：

这是非常规范的：

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

【讨论】：

我即将回答这个方法。你快了几秒钟。哈哈+1
很好的答案，效果很好！非常感谢！

【解决方案2】：

我假设您的问题是如何显示/隐藏在加载页面时已选中/未选中的复选框的 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();
    }          
  });
});

演示

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>

【讨论】：

非常感谢您的回复！ mplungjan 解决方案对我来说效果最好，但我发现你对这个问题的回答很有趣。非常感谢！

【解决方案3】：

您可以使用以下方式获取数据，然后根据复选框值显示或隐藏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

【讨论】：

【解决方案4】：

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

        });
    });

【讨论】：

您好，欢迎来到 stackoverflow，感谢您的回答。虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。

【解决方案5】：

试试这个方法。

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

【讨论】：