如何在頁面重新加載後保持複選框切換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

確保格示出了基於複選框在頁面加載時：

$(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'); 
});