javascript - 如何在页面重新加载后保持复选框切换的 div 的状态？

Question

我有一个 div，它在选中复选框时出现，在未选中时隐藏。如果表单有错误，即使在提交前选中了复选框，页面也会重新加载并且 div 会隐藏起来。我可以添加对 onLoad 事件的调用，但是否有更简洁的方法来确保在页面重新加载后，根据复选框的状态呈现 div？

CSS:

#maintenance-window { display: none; }

jQuery:

$("#check-hasMaintenance").click(function() {
    $(this).is(":checked") ? $('#maintenance-window').show("fast") : $('#maintenance-window').hide("fast")
});

HTML:

<input type="checkbox" value="1" id="check-hasMaintenance">
<div id="maintenance-window">
    Stuff
</div>

Answer 1

选项 1

确保 div 在页面加载时基于复选框显示:

$(document).ready(function() {
     // Modified for readability - inline if is fine.
     if($("#check-hasMaintenance").is(":checked"))
         $('#maintenance-window').show("fast")
     else
         $('#maintenance-window').hide("fast");
});

简化的隐藏/显示代码:

$("#check-hasMaintenance").click(function() {
    $('#maintenance-window').toggle('fast');
});

选项 2

像这样的简写版本也应该可以工作:

$(document).ready(function() {
    $('#maintenance-window').toggle($("#check-hasMaintenance").is(":checked"));
});

$("#check-hasMaintenance").click(function() {
    $('#maintenance-window').toggle('fast');
});