为什么复选框在重新加载页面时保持选中状态？

我正在重新加载一个网页，其代码如下:

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

尽管每次重新加载页面时发送到浏览器的 HTML 都是相同的，但在执行重新加载时，复选框始终接受选中的值。换句话说，如果用户选中该复选框并重新加载，该复选框仍然被选中。

这里有什么缓存吗？

编辑 : 我在下面尝试了 Gordon Bell 的解决方案，发现即使删除了值 = “1”，这种情况仍在发生。我还漏掉了什么吗？

<label for="showimage">Show Image</label>
<input id="showimage" name="showimage" type="checkbox" />
67402 次浏览
小开
最佳答案

Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).

you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)

edit: I was able to disable this server side on Firefox, setting a cache control header:

Cache-Control: no-store

this seems to disable the "remember form values" feature of Firefox

小开

It is a nice feature of Firefox: if you type something but reload the page, the text remains in the text area. Idem for other settings you have chosen.

Alas, it doesn't work in SO (probably reset by JS) and dumber browsers like IE...

Which suggest a solution: if you really need to do that, reset the form with JS. form.reset() might do the job (acts like the Reset input button).

小开

or instead of f5 press enter on address bar :)

小开

It could be due to a browser caching - very useful for static web sites that are not changed too often, very bad for dynamic web applications.
Try with those two meta tags in the head section of the page. Second meta tag is for older browsers (IE5) that are not recognizing "no-cache" meta tag and although different produces the same result: Each request goes to the server.

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

Add autocomplete="off" into the form element on the page. The downside is that this isn't valid XHTML, but it fixes the issue without any convoluted javascript.

小开

set autocomplete="off" with js is also working well.

for example using jquery:

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

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

小开

the public idea to solve that

make form & reset button 

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


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

This is an old question but still an active issue for firefox. None of the responses i tried solved it, but what did solve it for me was simply this:

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

This simply resets the form to the default options every time the page loads. Not ideal since you lose granular control, but its the only thing that solved this for me.


提交答案