清除后退按钮上的表格？答案

【问题标题】：Clear Form on Back Button?清除后退按钮上的表格？
【发布时间】：2011-11-30 18:35:18
【问题描述】：

我有一个页面，窗体中有几个复选框，在选择时，用jQuery筛选出表中的相应信息。我的问题是以下情况：

有人选中一个或多个框，从表中隐藏行
他们点击一个链接，转到另一个页面
他们点击后退按钮。

此时，复选框仍处于选中状态（至少在 chrome 中），但所有表格行再次可见。

有什么想法吗？

【问题讨论】：

标签： jquery forms checkbox back-button browser-cache

【解决方案1】：

如果您的目标是让他们回到他们离开前的确切视图（表格行仍然隐藏）：

这是网站的一个缺点（或优点）：它是无状态的，尤其是在客户端操作方面。

您需要做的是将应用程序状态存储在 URL 哈希标记中，以便当用户使用他们的后退按钮时，您可以检索“状态”并重建他们的视图。

这是另一个问题，其答案可能对您有所帮助：jquery javascript: adding browser history back with hashtag?

如果您的目标是将页面恢复到初始状态：

只需在页面加载时重置所有复选框：

$('input:checkbox').prop('checked', false);

-或-

重置整个表单：

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .prop('checked', false)
 .prop('selected', false);

【讨论】：

【解决方案2】：

不要让你的页面被缓存，或者添加代码来重置你的表单：

$("form input").each(function(){
    var elem = $(this);
    var type = elem.attr("type");
    if(type == "checkbox") elem.prop("checked", "");
    else if(type == "text") elem.val("");
});

必须使用.each，因为CSS选择器input[type=text]不匹配<input />，而该元素仍然是一个文本元素。

【讨论】：

【解决方案3】：

对于 IE 在提交后重置表单，对我没有帮助。相反，以下代码对我有用。页面加载事件也会在浏览器后退按钮上调用。

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

【讨论】：

【解决方案4】：

因此，您的问题不在于浏览器缓存用户输入，而在于未隐藏行。您可以通过添加一个 jQuery 脚本来轻松解决这个问题，该脚本将检查复选框是否被选中（在加载页面后）。如果选中，则隐藏该行:)

伪代码：

1. wait for the page to load
2. for each checkbox check if checked
3. if it's checked, hide the corresponding row in the same way you did when the user checked it.

【讨论】：