Reset checkbox checked state go back from history
Try adding something like this:
$( document ).ready(function() {
$("#m").prop('checked',false );
});
$( document ).ready(function() {
$("#m").prop('checked',false );
});
#n {
display: none;
}
#m:checked ~ #n {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
<ul>
<li><a href="//example.com">Link 1</a></li>
</ul>
</nav>
No need for JS or CSS, just add autocomplete="off"
to the checkbox. This will prevent the browser from caching the 'checked' status.
Example: https://jsfiddle.net/6g5u8wkb/
Also, if you have multiple checkboxes, I beleive you can add autocomplete="off"
to the form
element to apply the effect to all inputs fields.
Further to the other comments, if you are writing an AJAX driven page that uses pushState/replaceState, and the back button would not actually reload a page (i.e. no HTTP request), you can listen for the popState
event and clear the checkbox.
window.onpopstate = function(event) {
$("#m").prop('checked',false );
};
It's a HTML 5 feature that's not fully supported across all browsers (although support is pretty good)
https://developer.mozilla.org/en-US/docs/Web/Events/popstate
Other options would be to use libraries like history.js, jquery-bbq, sammyjs, and so on.