返回上一页后复选框仍勾选但无法被jQuery检测的问题求助

这个问题我之前也碰到过！根源在于浏览器的后退缓存（Back-Forward Cache，简称BFcache）——当你点击返回按钮时，浏览器为了提升页面加载速度，会直接从缓存中恢复整个页面的状态（包括复选框的勾选状态），但此时$(document).ready()并不会重新触发，因为浏览器认为页面已经完成DOM加载了，这就导致你的CheckVisibility()函数没机会重新检测复选框的真实状态。

解决方案：监听pageshow事件 #

pageshow事件会在页面显示时触发，不管是首次加载还是从缓存中恢复的情况。我们只需要把状态检测的逻辑同时绑定到ready和pageshow事件上即可：

修改你的JavaScript代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    CheckVisibility();
});

// 新增：监听页面显示事件，处理从缓存返回的情况
$(window).on('pageshow', function() {
    CheckVisibility();
});

function CheckVisibility(){
    if($('#cb').is(':checked')){
        $('#label').show()
    } else{
        $('#label').hide()
    }
}
</script>

额外说明 #

• 为什么不用其他事件？比如load事件？因为load事件在页面从缓存恢复时也不会触发，而pageshow是专门为这种场景设计的。
• 如果你想更稳妥，还可以直接读取复选框的原生checked属性（$('#cb')[0].checked），和is(':checked')效果一致，但有时候原生属性的读取会更直接反映真实状态。

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