如何在重新加載頁面時保持複選框被選中並顯示內容？

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> 

你不應該需要另外toggle()功能或在線onclick處理程序將通過具有約束力的事件處理程序jQuery的。

請注意，我已經進一步簡化了一些事情。 var test = localStorage.input === 'true'? true: false;可以簡化爲var test = localStorage.input === 'true';，因爲===運算符返回布爾值，並且在下一行可以刪除|| false，因爲此時您知道test是布爾值。而且，除此之外，由於您在設置後只使用一次，您並不需要test變量。

此外，您在測試checked狀態時，在一個位置使用$(this).is(':checked')，在下一行使用$(this).prop('checked')時有點不一致。兩者都可以工作，但考慮到this是對DOM元素的引用，您可以簡單地說this.checked直接測試屬性而不使用jQuery。（唯一時間​​是有道理的是，當調用一個包含多個元素的jQuery對象時，並且您想要查看是否至少檢查了其中一個元素。）

Answer 2

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

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