Javascript 如何在重新加载页面时保持复选框处于选中状态并显示内容？

我有以下html内容：

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

您可以看到，如果选中复选框，它将显示，如果未选中，它将隐藏我的

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>

$（函数（）{
var test=localStorage.input=='true'？true:false；
$（'input'）.prop（'checked'，test | | false）；
});
$（'input'）。在（'change'，function（）上{
localStorage.input=$（this）.is（':checked'）；
if（$（this.prop（'checked'））{
$（className）.show（1000）；//选中
}
log（$（this）.is（':checked'）；
});

现在我的问题是

当我重新加载页面时，如果选中复选框，则不会显示内容。。。。因此，我必须取消选中它，然后再次检查它以使其工作

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

编辑

感谢@nnnn在我开始工作之前的回答：

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

...
$（函数（）{
$（“#测试”）
.prop（'checked'，localStorage.input=='true'）
.on（'单击'，函数（））{
localStorage.input=this.checked；
如果（选中此项）{
$（'.myClass'）.show（1000）；//选中
}否则{
$（'.myClass'）.hide（1000）；
}
})
.触发（“变更”）；
});

以编程方式设置元素的

选中属性不会触发附加到元素的任何
单击
或
更改
处理程序。因此，在设置该值的行之后，您需要通过调用
.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>


$（函数（）{
$（“#测试”）
.prop（'checked'，localStorage.input=='true'）
.on（'change'，function（））{
localStorage.input=this.checked；
如果（选中此项）{
$（'.myClass'）.show（1000）；//选中
}否则{
$（'.myClass'）.hide（1000）；
}
})
.触发（“变更”）；
});

除了通过jQuery绑定事件处理程序外，您不应该需要
toggle（）
函数或内联
onclick
处理程序

注意，我进一步简化了事情<代码>变量测试=本地存储。输入=='true'？真：假可以简化为
var test=localStorage.input=='true'
，因为
=
运算符返回一个布尔值，而在下一行可以删除
|false
，因为此时您知道
test
是一个布尔值。除此之外，您根本不需要
test
变量，因为您只在设置后使用它一次

另外，您使用
$（this）.is（':checked'）
在一个位置测试
checked
状态，而在下一行使用
$（this）.prop（'checked'）
测试状态的方式有点不一致。这两种方法都有效，但鉴于
this
是对DOM元素的引用，您可以简单地说
this.checked
直接测试属性，而无需jQuery。（对包含多个元素的jQuery对象调用
.is（'：checked'）
时，您需要查看是否至少选中了其中一个元素。）
以编程方式设置元素的
选中属性不会触发任何附加到元素的
单击
或
更改
处理程序。因此，在设置该值的行之后，您需要通过调用
.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>


$（函数（）{
$（“#测试”）
.prop（'checked'，localStorage.input=='true'）
.on（'change'，function（））{
localStorage.input=this.checked；
如果（选中此项）{
$（'.myClass'）.show（1000）；//选中
}否则{
$（'.myClass'）.hide（1000）；
}
})
.触发（“变更”）；
});

除了通过jQuery绑定事件处理程序外，您不应该需要
toggle（）
函数或内联
onclick
处理程序

注意，我进一步简化了事情<代码>变量测试=本地存储。输入=='true'？真：假可以简化为
var test=localStorage.input=='true'
，因为
=
运算符返回一个布尔值，而在下一行可以删除
|false
，因为此时您知道
test
是一个布尔值。除此之外，您根本不需要
test
变量，因为您只在设置后使用它一次

另外，您使用
$（this）.is（':checked'）
在一个位置测试
checked
状态，而在下一行使用
$（this）.prop（'checked'）
测试状态的方式有点不一致。这两种方法都有效，但鉴于
this
是对DOM元素的引用，您可以简单地说
this.checked
直接测试属性，而无需jQuery。（只有在对包含多个元素的jQuery对象调用时，
.is（'：checked'）
才有意义，您需要查看是否至少选中了其中一个元素。）
尝试添加代码行$（'input'）.change（）；作为

正在尝试添加代码行$（'input'）。change（）；作为

嘿非常感谢您的回答，在尝试了您的代码之后，如果我检查了它，我会重新加载页面并将其更改为未检查，如果我再次重新加载页面，它会更改为已检查，并按照我的预期显示内容，但我真正需要的是什么
 $(function(){
        var test = localStorage.input === 'true'? true: false;
        $('input').prop('checked', test || false);
         $('input').change();
    });