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

Posted 2023-05-08

【中文标题】重置复选框选中状态从历史返回

【英文标题】：Reset checkbox checked state go back from history

【发布时间】：2016-10-22 07:55:27

【问题描述】：

在下面的示例中，我使用复选框来制作纯 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;

【参考方案1】：

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

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

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

【讨论】：

autocomplete="off" 被 IE11 忽略！！它仍然会恢复状态！

这让我挂了几个小时。我不明白为什么即使我的模型值正在更新选中状态，在我刷新页面之前总是会选中复选框。

【参考方案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>

【参考方案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 等库。

【参考方案4】：

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

【讨论】：

还有其他答案和一个也接受了提供 OP 问题的答案，它们是前一段时间发布的。发布答案 see: How do I write a good answer? 时，请确保添加新的解决方案或更好的解释，尤其是在回答较老的问题时。