Question

我有这个HTML内容：

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

如您所见，这是一张隐藏

的表格

如果选中该复选框，我有一个checkbox来显示

<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处理程序。因此，在您设置该行的行之后，您需要通过调用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绑定事件处理程序之外，您不应该需要toggle()函数或内联onclick处理程序。

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

此外，您在测试checked状态方面有点不一致，在一个地方使用$(this).is(':checked')，在下一行使用$(this).prop('checked')。两者都有效，但鉴于this是对DOM元素的引用，您可以简单地说this.checked来直接测试属性而不使用jQuery。（唯一的时间.is(':checked')是有意义的，当调用包含多个元素的jQuery对象时，您想要查看是否至少检查了其中一个元素。）

Answer 2

尝试添加代码行$（＆＃39;输入＆＃39;）。change（）;如

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

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

2 个答案: