重置复选框选中状态从历史返回

Question

在下面的示例中，我使用复选框来制作纯 CSS 下拉导航，在此 jsFiddle example 中也可以使用。

打开那个小提琴，点击“菜单”，点击“链接1”，然后点击浏览器工具栏上的“返回”按钮，你可以看到复选框仍然被选中，所以导航仍然打开。

我的问题是 - 从浏览器历史记录返回时是否可以自动将该复选框重置为未选中？请问有什么建议吗？我需要使用 Javascript/jQuery 吗？

HTML

<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>

CSS

#n {
  display: none;
}
#m:checked ~ #n {
  display: block;
}

Answer 1

不需要 JS 或 CSS，只需在复选框中添加 autocomplete="off"。这将阻止浏览器缓存“已检查”状态。

示例：https://jsfiddle.net/6g5u8wkb/

另外，如果您有多个复选框，我相信您可以将 autocomplete="off" 添加到 form 元素以将效果应用于所有输入字段。

Answer 2

尝试添加如下内容：

$( 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>

Answer 3

对于其他 cmets，如果您正在编写一个使用 pushState/replaceState 的 AJAX 驱动页面，并且后退按钮实际上不会重新加载页面（即没有 HTTP 请求），您可以监听 popState 事件并清除复选框。

window.onpopstate = function(event) {
   $("#m").prop('checked',false );
};

这是一项 HTML 5 功能，并非所有浏览器都完全支持（尽管支持非常好）

https://developer.mozilla.org/en-US/docs/Web/Events/popstate

其他选项是使用 history.js、jquery-bbq、sammyjs 等库。

Answer 4

在复选框中添加autocomplete="off"。