javascript - 如何在重新加载页面时保持选中复选框并显示内容？

Question

我有这个 html 内容:

<div class="myClass" style="display:none">
<table class="table table-hover">
.....
</table>
</div>

如您所见，这是一个隐藏的表格

我有一个复选框，如果选中该复选框则显示此内容

<label class="switch">
    <input type="checkbox" id="test" onclick="toggle('.myClass', this)" autocomplete="on" ></legend>
    <div class="slider round"></div>
</label>

<script language="JavaScript">
function toggle(className, obj) {
    var $input = $(obj);
    if ($input.prop('checked')) $(className).show(1000);
    else $(className).hide(1000);
}
</script>

如您所见，如果选中复选框，它将显示，如果未选中，它将隐藏我的 div

一切都很好。

现在，如果我重新加载此页面，我想保留选中的复选框(如果已选中或未选中)，我是这样得到的:

<script>
$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
            if ($(this).prop('checked')) {
            $(className).show(1000); //checked
        }
    console.log($(this).is(':checked'));
});
</script>

现在我的问题是

当我重新加载页面时，如果选中该复选框，它不会显示内容......所以我必须取消选中它并再次选中它才能使其正常工作。

如果选中该复选框，是否有可能重新加载页面并保持显示我的内容？

编辑

感谢@nnnnnn 在我开始工作之前的回答:

<label class="switch">
    <input type="checkbox" id="test" ></legend>
    <div class="slider round"></div>
</label>

<div class="myClass" style="display:none">
<table class="table table-hover">
...
</table>

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('click', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>

Answer 1

以编程方式设置元素的 checked 属性不会触发附加到该元素的任何click 或change 处理程序。因此，在您设置的行之后，您需要通过调用 .trigger('change') 或仅 .change( )。

您可以通过选择一次 $('#test') 来合并您的代码，然后在其后面链接所需的方法:

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('change', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>

除了通过 jQuery 绑定(bind)事件处理程序之外，您不需要 toggle() 函数或内联 onclick 处理程序。

请注意，我已经进一步简化了事情。 var test = localStorage.input === 'true'？ true: false; 可以简化为 var test = localStorage.input === 'true';，因为 === 运算符返回一个 bool 值，下一行是 || false 可以删除，因为此时您知道 test 是一个 bool 值。除此之外，您根本不需要 test 变量，因为您在设置后只使用它一次。

此外，您测试 checked 状态的方式有点不一致，在一个地方使用 $(this).is(':checked') 并 $(this).prop('checked') 在下一行。两者都可以工作，但考虑到 this 是对 DOM 元素的引用，您可以简单地说 this.checked 来直接测试属性，而无需 jQuery。 (.is(':checked') 唯一有意义的情况是在包含多个元素的 jQuery 对象上调用，并且您希望查看是否至少检查了其中一个元素。)