如何不通过历史记录保持复选框的状态？ [复制]答案

【问题标题】：How not to keep the state of a checkbox through the history? [duplicate]如何不通过历史记录保持复选框的状态？ [复制]
【发布时间】：2026-02-15 19:20:04
【问题描述】：

我正在使用复选框来创建移动菜单。简化，看起来像这样：

input, ul {
  display: none;
}
label {
  cursor: pointer;
}
input:checked ~ ul {
  display: block;
}

<input type="checkbox" id="toggle-menu" />
<label for="toggle-menu">Menu</label>
<ul>
  <li><a href="duckduckgo.com">Link</a></li>
</ul>

它工作得很好，除了一件事：当用户使用菜单在另一个页面中导航，然后返回历史记录时，复选框状态保持不变，从而显示菜单。

是否可以防止这种情况发生，最好不使用 Javascript？换句话说，我希望在访问页面时永远不会显示菜单，即使通过历史记录中的导航也是如此。用户必须点击标签才能看到菜单。

【问题讨论】：

标签： html css

【解决方案1】：

<input type="checkbox" id="toggle-menu" autocomplete="off"/>

【讨论】：

它有效，至少在 Firefox 和 Chrome 上有效！但是，它可靠吗？我已经阅读了它的文档，除非我误解了某些东西，否则它似乎在复选框类型上是无效的：developer.mozilla.org/en-US/docs/Web/HTML/Element/…
我刚刚检查了caniuse.com/#feat=mdn-html_global_attributes_autocomplete 我认为这很好，但这取决于您的用户。
我的意思是input 类型为checkbox 的属性autocomplete。 MDN 文档说：“此属性对不返回数字或文本数据的输入类型没有影响，对除复选框、单选、文件以外的所有输入类型均有效”。
好吧，描述说“除了复选框”，所以我认为它应该可以正常工作
它说“此属性对除复选框以外的所有输入类型都有效”。这意味着它在复选框上无效。

【解决方案2】：

添加 autocomplete="off" 会阻止浏览器记住复选框状态。

<input type="checkbox" id="toggle-menu" autocomplete="off" />

【讨论】：