【问题标题】:Why does the checkbox stay checked when reloading the page?为什么重新加载页面时复选框保持选中状态?
【发布时间】:2010-09-22 22:10:44
【问题描述】:

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

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

【问题讨论】:

    标签: firefox


    【解决方案1】:

    autocomplete="off" 添加到页面上的表单元素中。缺点是这不是有效的 XHTML,但它在没有任何复杂的 javascript 的情况下解决了这个问题。

    【讨论】:

    • 对我有用,而缓存控制标头却没有。
    • 从我reading 看来,它 在 HTML5 中实际上是有效的。 (在阅读有关该主题的更多信息之前,我赞成先前的评论。)因此,如果您使用的是 HTML5,请在复选框上使用自动完成功能。
    • 10 多年后。这个答案让我头疼!
    【解决方案2】:

    是的,我相信它正在缓存。例如,我在 Firefox 上看到了这种行为(不是 Safari,这是值得的 :))。

    您可以使用 CTRL-SHIFT-R 重新加载页面并绕过缓存(在 Firefox 上),您将看到检查值不携带(普通的 CTRL-R 会从缓存中获取信息)

    编辑:我能够在 Firefox 上禁用此服务器端,设置缓存控制标头:

    Cache-Control: no-store
    

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

    【讨论】:

    • 是的,CTRL-SHIFT-R 会导致复选框被重置。有没有办法防止这个被缓存?
    • 我不这么认为(至少不是从服务器端)。 Firefox 在缓存方面非常积极。我只能在客户端这样的情况下让它可靠地停止缓存
    • 它正在从它的缓存中获取值,因此它正在缓存。除非我误解了你的意思。
    • Firefox 的激进缓存是一个主要的 PITA,并且在针对它进行开发时总是让我感到困惑。我之前没有尝试过 Cache-Control 标头,但如果它有效,stackoverflow 就证明了我在这里花费的时间完全是合理的。
    • 这些值并非来自 Firefox 下载文件存储中的“缓存”。例如:如果您离开然后按照相同的 URL,页面会被缓存,但值不会被缓存。通过破坏缓存,您可以强制重新加载,但这只是巧合,这也会禁用该功能。
    【解决方案3】:

    用 js 设置 autocomplete="off" 也很好用。

    例如使用 jquery:

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

    【讨论】:

    • 谢谢,这对我帮助很大。 :)
    • 我发现您需要$("#formId").attr("autocomplete", "off"),其中#formId 是您的表单ID。
    • @DanDiplo 在很多情况下我们使用没有表单的复选框,因此应用 ("#formId").attr("autocomplete", "off")
    • @ClainDsilva 仅仅因为您可以在表单外使用复选框并不意味着我所说的任何内容都是不合逻辑的。您可能会声称它并不完全全面(尽管它适用于大多数场景),但说它不合逻辑是很奇怪的,因为它确实有效。
    • @DanDiplo 当我们可以单独在复选框上应用自动完成关闭时,它可以正常工作,我同意您的解决方案确实有效,但它也适用于表单框中的所有元素。然而,这可能不是预期的行为。问题仅限于复选框,而不是整个表单。恕我直言,我只想找到适合该问题的最佳解决方案。在这种情况下,对整个表单应用自动完成是不正确的。
    【解决方案4】:

    这是一个老问题,但对于 Firefox 来说仍然是一个活跃的问题。我尝试过的所有回复都没有解决它,但确实为我解决的只是这个:

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

    这只是在每次页面加载时将表单重置为默认选项。不理想,因为您失去了精细控制,但它是唯一为我解决这个问题的方法。

    【讨论】:

      【解决方案5】:

      这是 Firefox 的一个不错的功能:如果您键入内容但重新加载页面,文本仍会保留在文本区域中。与您选择的其他设置相同。

      唉,它在 SO(可能被 JS 重置)和 IE 等更笨的浏览器中不起作用...

      建议一个解决方案:如果您确实需要这样做,请使用 JS 重置表单。 form.reset() 可能会完成这项工作(就像重置输入按钮一样)。

      【讨论】:

      • 看起来有点老套,或者像用大炮射击麻雀。
      • @MészárosLajos 什么是 hacky/矫枉过正,你为什么这么认为?你看到更简单的东西了吗?
      • 如果您只想部分重置表单怎么办?我个人只想禁用复选框的输入缓存,而不是文本字段。我完全同意你的观点,这是 Firefox 的一个很好的功能,但不适用于自定义两个状态按钮,它们基本上是重新设计的复选框。另一件事是,为什么要使用 javascript,您可以简单地使用 html 属性来防止这种行为?是的,我知道,“autocomplete=off”会使 html 代码无效,但页面仍然有效。
      • “它是 Firefox 的一个不错的功能”:如果您单击搜索结果页面上的过滤复选框然后重新加载它,则选中的过滤器对于显示的数据集毫无意义。 -我说这是一个主要的 PITA,如前所述。
      • 我永远不会称这是一个很好的功能...是的,当您输入大量文本然后需要刷新页面时,它确实有帮助,但如果您正在开发一个用户界面,它远非一个好的功能。
      【解决方案6】:

      或者在地址栏上按回车键而不是 f5 :)

      【讨论】:

      • 或者建议用户这样做,而不是(这是开发人员的问题)。
      • 我们不能期望用户总是用 Crtl+Shift+R 刷新页面,不是吗?
      【解决方案7】:

      这可能是由于浏览器缓存 - 对于不经常更改的静态网站非常有用,对于动态 Web 应用程序非常不利。
      尝试在页面的 head 部分使用这两个元标记。第二个元标记适用于不识别“无缓存”元标记的旧浏览器 (IE5),尽管不同会产生相同的结果:每个请求都发送到服务器。

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

      【讨论】:

      • 我们真的关心像IE5这样的旧浏览器吗?顺便说一句,用 PHP 发送标头似乎更好一些,因为您在 中使用较少的元标记
      • 他的回答是在 2008 年,@MészárosLajos 的评论是在 2014 年。当时,是的,确实很重要。
      【解决方案8】:

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

      【讨论】:

        【解决方案9】:

        解决这个问题的公众想法

        制作表格和重置按钮

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

        【讨论】:

          猜你喜欢
          • 2016-08-23
          • 2015-10-18
          • 1970-01-01
          • 1970-01-01
          • 2011-03-11
          • 2015-03-28
          • 2021-03-01
          相关资源
          最近更新 更多