javascript - 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

这是非常规范的。

虽然我会使用 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'));