jQuery 清除后退按钮上的表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7649747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear Form on Back Button?
提问by Zach Lysobey
I have a page with several check-boxes in a form, which when selected, filter corresponding info out of a table with jquery. My problem is the following scenario:
我有一个页面，表单中有几个复选框，选中时，使用 jquery 从表中过滤出相应的信息。我的问题是以下场景：
Someone checks one or more boxes, hiding rows from table
They Click a link, going to another page
They click the back button.
有人选中一个或多个框，从表中隐藏行
他们点击一个链接，转到另一个页面
他们点击后退按钮。
At this point, the check boxes are still checked (in chrome at least), but the all the table rows are visable again.
此时，复选框仍处于选中状态（至少在 chrome 中），但所有表格行再次可见。
Any Ideas?
有任何想法吗？
采纳答案by Adam Terlson
If your objective is to bring them back to the exact view they had before they left (table rows are still hidden):
如果您的目标是让他们回到他们离开之前的确切视图（表格行仍然隐藏）：
Such is a disadvantage (or advantage) of a website: it's stateless, particularly when it comes to client-side manipulation.
这是网站的一个缺点（或优点）：它是无状态的，尤其是在涉及客户端操作时。
What you'll need to do is store the application state in the URL hash tag so that when the user uses their back button, you can retrieve the "state" and reconstruct their view.
您需要做的是将应用程序状态存储在 URL 哈希标记中，以便当用户使用他们的后退按钮时，您可以检索“状态”并重建他们的视图。
Here's another question whose answer might help you: jquery javascript: adding browser history back with hashtag?
这是另一个问题，其答案可能对您有所帮助：jquery javascript：使用主题标签添加浏览器历史记录？
If your objective is to return the page back to its initial state:
如果您的目标是将页面返回到初始状态：
Just reset all the checkboxes on page load:
只需在页面加载时重置所有复选框：
$('input:checkbox').prop('checked', false);
-or-
-或者-
Reset the entire form:
重置整个表单：
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
回答by Rob W
Do not allow your page to be cached, or add code to reset your form:
不允许缓存您的页面，或添加代码来重置您的表单：
$("form input").each(function(){
var elem = $(this);
var type = elem.attr("type");
if(type == "checkbox") elem.prop("checked", "");
else if(type == "text") elem.val("");
});
.eachhas to be used, because the CSS selector input[type=text]doesn't match <input />, while the element is still a text element.
.each必须使用，因为 CSS 选择器input[type=text]不匹配<input />，而元素仍然是文本元素。
回答by Asanka Siriwardena
For IE resetting the form after submit, did not help for me. Instead following code worked for me. Page load event gets called on browser Back Button as well.
对于 IE 在提交后重置表单，对我没有帮助。相反，以下代码对我有用。页面加载事件也会在浏览器后退按钮上调用。
$(window).load(function() {
$('form').get(0).reset(); //clear form data on page load
});
回答by XCS
So your problem is not with the browser caching the user input but with the rows not being hidden. You can easily solve this problem by adding a jQuery script that will check if a checkbox is checked (after loading the page). If it's checked, you hide the row :)
所以你的问题不在于浏览器缓存用户输入，而在于行没有被隐藏。您可以通过添加一个 jQuery 脚本来轻松解决此问题，该脚本将检查是否选中了复选框（加载页面后）。如果选中，则隐藏该行:)
pseudocode:
伪代码：
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.
