jQuery - 選中復選框時隱藏/顯示 div

Question

我有一個 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>

Answer 1

我假設您的問題是如何顯示/隱藏加載頁面時已選中/未選中的復選框的 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>

Answer 2

這是非常規范的：

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

您可以使用以下方法獲取數據，然后根據復選框值顯示或隱藏 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

Answer 4

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

        });
    });

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