如何在重新加載頁面時保持復選框處於選中狀態並顯示內容？

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附着在單元處理程序。 因此，在設置該行的那一行之后，您需要自己通過調用.trigger('change')或僅.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 可以刪除|| false因為那時您知道test是布爾值。 除此之外，假設只在設置變量后使用一次，就根本不需要test變量。

此外，您在一個位置使用$(this).is(':checked')並在下一行使用$(this).prop('checked')與測試已checked狀態的方式有點不一致。 兩者都有效，但是鑒於this是對DOM元素的引用，您可以簡單地說this.checked來直接測試屬性而無需jQuery。 （ .is(':checked')唯一有意義的時間是在包含多個元素的jQuery對象上調用時，您要查看是否至少檢查了其中一個。）

Answer 2

嘗試添加代碼行$（'input'）。change（）; 如

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