jQuery：解决页面加载时已勾选复选框对应Div未显示的问题

这个问题很典型——你的代码只在复选框的change事件触发时才会切换Div的显示状态，但页面初始化完成时，并没有主动去检测那些已经处于勾选状态的复选框，所以它们对应的Div就不会自动显示出来。

这里有两种简洁的修改方案：

方案一：触发一次change事件 #

我们可以在绑定完change事件后，手动触发所有.my_features复选框的change事件，这样就能让初始化逻辑自动执行一遍：

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();
        }
    }).trigger('change'); // 新增这一行，触发初始状态检查
});

方案二：提取逻辑为复用函数 #

如果后续还有需要复用这个状态判断逻辑的场景，把判断逻辑抽成独立函数会更优雅：

jQuery(document).ready(function($) {
    // 定义复用的状态处理函数
    function toggleFeatureDiv(checkbox) {
        var $checkbox = $(checkbox);
        $( '#' + $checkbox.attr('data-name') )[ $checkbox.is(':checked') ? 'show' : 'hide' ]();
    }

    // 绑定change事件
    $('.my_features').change(function() {
        toggleFeatureDiv(this);
    });

    // 初始化时遍历所有复选框，执行状态处理
    $('.my_features').each(function() {
        toggleFeatureDiv(this);
    });
});

两种方案都能解决你的问题，方案一更简洁，方案二更灵活，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Flow