重置复选框选中状态从历史记录中返回 [英] Reset checkbox checked state go back from history

问题描述

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

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

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

HTML

Menu<input id="m" type="checkbox"><nav id="n"><ul><li><a href="//example.com">链接 1</a></li></nav>

CSS

#n {显示:无；}#m:检查〜#n {显示:块；}

解决方案

无需 JS 或 CSS，只需在复选框中添加 autocomplete="off" 即可.这将防止浏览器缓存已检查"状态.

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

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

In the following example, I use checkbox for making a pure CSS dropdown navigation, also available in this jsFiddle example.

Open that fiddle, click "Menu", click "Link 1", and click the "Back" button on the browser toolbar, as you can see the checkbox remains checked, so the navigation is still open.

My question is - would it be possible to reset that checkbox to unchecked automatically when going back from the browser history? Any suggestions please? Do I need to use 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;
}

解决方案

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.

这篇关于重置复选框选中状态从历史记录中返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！