为什么重新加载页面后复选框仍然被选中?

93

我正在重新加载一个包含以下代码的网页:

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" value="1" />

尽管每次重新加载页面时发送到浏览器的HTML保持不变,但复选框在重新加载后始终采用已选中的状态。换句话说,如果用户选中了复选框并重新加载,则复选框仍处于选中状态。

这里是否有一些缓存正在进行?

编辑:我尝试了Gordon Bell下面的解决方案,并发现即使删除value =“1”,仍然会发生这种情况。还有其他我可能忽略的东西吗?

<label for="showimage">Show Image</label> 
<input id="showimage" name="showimage" type="checkbox" /> 
9个回答

202
在页面表单元素中添加autocomplete="off"。缺点是这不是有效的XHTML,但它可以修复问题而不需要任何复杂的JavaScript代码。

1
适用于我,但缓存控制标头无效。 - Lajos Mészáros
8
根据我所阅读的内容(http://www.w3schools.com/html/html_form_attributes.asp),在HTML5中,禁止自动完成功能确实是有效的。因此,如果您在使用HTML5,可以尽情使用禁止自动完成功能来控制复选框。在我阅读更多相关主题之前,我已经为以前的评论点过赞。 - EF0
8
十年后。这个回答让我省了一场头痛! - Daan van den Bergh

38

是的,我认为这是缓存引起的。例如,我在Firefox上看到了这种行为(对于Safari而言并非如此重要 :))。

您可以使用CTRL-SHIFT-R重新加载页面并绕过缓存(在Firefox上),然后您会发现检查值不会被保留(但普通的CTRL-R会从缓存中获取信息)。

编辑:我能够在Firefox上通过设置缓存控制头来禁用它。

Cache-Control: no-store

这似乎禁用了Firefox的“记住表单值”功能。


我认为不行(至少不是从服务器端)。火狐浏览器在缓存方面非常强硬。在这种情况下,我只能够从客户端上停止可靠地缓存。 - Owen
2
它正在从其缓存中获取值,因此它在进行缓存。除非我对你的意思有什么误解。 - Owen
2
Firefox的强制缓存是一个很大的烦恼,当我开发的时候总是被它抓住。我以前没有尝试过Cache-Control头,但如果它起作用了,stackoverflow完全证明了我在这里花费时间的价值。 - Cruachan
1
这些值并不是来自于 Firefox 下载文件存储中的“缓存”。例如:如果你离开了当前页面,然后再次访问相同的 URL,该页面会被缓存,但这些值不会。通过打破缓存,你可以强制进行硬刷新,但这只是巧合,同时也会禁用该功能。 - bobince
@Owen - 假设我们正在测试一个包含复选框的网页。根据业务规则,除非单击页面上的保存/提交按钮,否则我们不希望保存这些已选中的值。为了测试每个这样的页面,我们是否需要包括一个测试用例,仅测试在重新加载页面时所有框都未被选中? - MasterJoe
显示剩余4条评论

37

使用JS设置autocomplete="off"同样有效。

例如,使用jQuery:

$(":checkbox").attr("autocomplete", "off");

1
我发现你需要 $("#formId").attr("autocomplete", "off"),其中 #formId 是你的表单的ID。 - Dan Diplo
@DanDiplo,有很多情况下我们会在没有表单的情况下使用复选框,因此将 ("#formId").attr("autocomplete", "off") 应用于它是不合逻辑的。 - Clain Dsilva
2
@ClainDsilva 只是因为你可能在表单之外使用复选框,并不意味着我所说的任何内容都是不合逻辑的。你可以声称它不是完全全面的(尽管它适用于大多数情况),但说它不合逻辑是很奇怪的,因为它确实有效。 - Dan Diplo
@DanDiplo 当我们仅在复选框上应用自动完成关闭时,它可以正常工作。我同意你的解决方案确实有效,但它也适用于表单框中的所有元素。然而,这可能不是预期的行为。问题仅限于复选框而不是整个表单。恕我直言,我只想找到最适合问题的最佳解决方案。在这种情况下,为整个表单应用自动完成关闭并不正确。 - Clain Dsilva
@RainChen 这是Firefox的一个很好的功能,但有时候对用户来说好的功能却会成为开发者的头疼。它对我很有用!非常感谢。 :) - Nikhil

3

这是一个旧问题,但对于火狐浏览器仍然是一个活跃的问题。我尝试了所有的响应,但是对我有用的解决方案非常简单:

    document.getElementById('formId').reset();

每次页面加载时,这将简单地将表单重置为默认选项。虽然不是理想的方式,因为你失去了细粒度的控制,但这是唯一解决我的问题的方法。


1

这是 Firefox 的一个很好的功能:如果你输入了一些内容但重新加载页面,文本区域中的文本将保留。其他你选择的设置也是如此。

可惜,在 SO 中它不起作用(可能被 JS 重置),而像 IE 这样的更笨的浏览器也不行...

这表明有一个解决方案:如果你真的需要这样做,请使用 JS 重置表单。form.reset() 可能会完成任务(就像重置输入按钮一样)。


1
似乎有点不太正规,或者说用大炮打麻雀。 - Lajos Mészáros
@MészárosLajos 什么是hacky/过度设计,为什么你认为它是这样的?你有看到更简单的东西吗? - PhiLho
如果您只想部分重置表单怎么办?我个人只想禁用复选框的输入缓存,而不是文本字段。我完全同意您的观点,这是Firefox的一个很好的功能,但对于基本上是重新设计的复选框的自定义双状态按钮来说并不适用。另一件事是,为什么要使用JavaScript,当您可以简单地使用HTML属性来防止此行为?是的,我知道,“autocomplete=off”使HTML代码无效,但页面仍然可以正常工作。 - Lajos Mészáros
3
“这是Firefox的一个不错的功能”,如果您在搜索结果页面上单击筛选复选框,然后重新加载页面,则所选筛选器与显示的数据集无关。我认为这是个很大的麻烦,就像先前所述的那样。 - Sharky
我从不会称这为一个好的功能……是的,当你正在输入大量文本并需要刷新页面时,它确实有所帮助,但如果你正在开发用户界面,它远非一个好的功能。 - userfuser

0

公共解决方案如下:

创建表单和重置按钮

<form>
<checkbox>
<reset>
</form>

$(reset).trigger("click");//to clear the cache and input 
$(checkbox).trigger("click");//to mark checkbox

0

$("#showimage").prop("checked",false);


0

或者在地址栏按回车键,而不是按下F5 :)


2
或者建议用户这样做,而不是这样问(这是开发人员的问题)。 - Mr. TA
我们不能真正期望用户总是使用Crtl+Shift+R刷新页面,不是吗? - Lajos Mészáros

0

这可能是由于浏览器缓存引起的 - 对于不经常更改的静态网站非常有用,但对于动态Web应用程序非常不利。
请在页面头部尝试使用这两个meta标签。第二个meta标签是针对旧版浏览器(IE5)的,它们无法识别“no-cache”meta标签,尽管不同但产生相同的结果:每个请求都发送到服务器。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1">

我们真的需要关心IE5这样的旧浏览器吗?顺便说一下,使用PHP发送标头似乎更好,因为你在<head>中使用了较少的元标记。 - Lajos Mészáros
3
他的答案是在2008年,@MészárosLajos的评论是在2014年。当时,是的,这很重要。 - Duniyadnd

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接