ページをリロードした後、チェックボックスで区切られた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"); 
}); 

簡体表示/非表示のコード：2

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

オプションは、このような短い手のバージョンも同様に動作するはずです：

を

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

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