复选框仍然选中点击后退按钮，但它没有“选中”属性
Posted
技术标签:
【中文标题】复选框仍然选中点击后退按钮，但它没有“选中”属性【英文标题】：Checkbox still checked hitting the back button, but it has no "checked" attribute 【发布时间】：2016-02-17 07:07:30 【问题描述】：我正在为电子商务开发基于复选框的过滤器。 一切正常，但是当我尝试通过后退按钮返回时，复选框仍然在没有任何选中属性的情况下被选中。
我注意到这个“问题”发生在：
野生动物园 铬我发现的唯一方法就是重新加载页面。但是“user-went-back”事件似乎无法捕捉到，我不想刷新每个页面。
将我的所有复选框设置为默认值是没有意义的。
禁用 Chrome 缓存无效。
我不知道我的代码示例是否有用
编辑：这是我的第一篇文章，所以请务必告诉我为什么我的问题似乎不清楚
【问题讨论】：
注意是否使用ready 事件（正如 Matt The Ninja 和 Suyog 所建议的那样）。除非您指定 onunload 处理程序，否则不会在后面触发它。见***.com/questions/158319/…window.onunload = function();就够了
听起来很不错。确实，问题解决了。谢谢@king_nak
【参考方案1】：
使用 javascript 清理表单，使用 jQuery 之类的框架可能更快。 然后是这样的......
$( document ).ready(function()
$(':input').val(''); //This would clear all inputs.
);
因此，当文档完成加载时，它将清除所有输入。
【讨论】：
事实是我的复选框在这种情况下充当过滤器。加载页面后清除所有复选框没有意义，因为它将通过 $_REQUEST 恢复应该检查的复选框 使用 JS 来获取 http 参数并根据需要应用/清除复选框？对不起，我想我误解了你的第一个问题。【参考方案2】：对身体负荷使用以下功能。
<body onLoad="uncheck()">
<script>
function uncheck()
$(':checkbox:checked').prop('checked',false);
//or you can also use removeAttr
//$(':checkbox:checked').removeAttr('checked');
</script>
查看prop 和removeAttr 了解更多详情
或者你也可以使用下面的代码
<script>
$( document ).ready(function()
$(':checkbox:checked').prop('checked',false);
//$(':checkbox:checked').removeAttr('checked');
);
</script>
查看.ready了解更多详情。
或
如果您想清除所有输入字段，这里有详细解释的答案：Resetting a multi-stage form with jQuery
【讨论】：
【参考方案3】：我知道这是一个老问题，但有人可能会“谷歌”同样的问题并在这里登陆，就像我一样。在 2019 年，Chrome 71 仍然有这种行为，所以它不会很快消失。同时这里有一个脚本可以轻松地将选中状态调整为选中属性。
<script>
/* This script is to FIX some strange browser (Chrome included) behaviour.
History back returns false checks on checkboxes.
The checked html attribute is only a "DEFAULT VALUE" unfortunately */
var filter_form = document.getElementById("filter_form");
var inputs = filter_form.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
if(inputs[i].type == "checkbox")
/* If default is checked, but state is not checked, check it*/
if (inputs[i].defaultChecked == true)
if (inputs[i].checked != true)
inputs[i].checked = true;
/* If defeault not checked, but state is checked, uncheck it */
else
if (inputs[i].checked == true)
inputs[i].checked = false;
</script>
【讨论】：
【参考方案4】：有一个疯狂的技巧可以解决这个问题。将autocomplete='off' 添加到您的复选框中。听起来很疯狂，但它确实有效！
【讨论】：
这似乎不是一个好的解决方案，即使它有效。听起来几乎就像您正在利用一个错误。如果“错误”在未来的浏览器中得到修复怎么办？疯狂的答案需要解释，理性的答案每天都胜过疯狂的答案。 在我看来，OP 正在读取输入元素的 checked 属性，而她/他应该读取其 checked 属性。选中的 attribute 仅指定复选框应如何初始化，但浏览器在您向前/向后导航时会记住表单状态。选中的 property 应该与浏览器当前呈现复选框的方式相匹配。 “与其他浏览器不同，Firefox 默认情况下会在页面加载时保持 的动态检查状态。使用 autocomplete 属性来控制此功能。” developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…【参考方案5】：我也遇到了这个问题，但想保持选中状态（只需将页面状态调整为它）。我遇到的问题是 chrome 只是在 JavaScript 运行后更改了复选框的选中状态，包括加载事件，而没有触发任何进一步的事件（如更改或输入）。
有什么活动吗？不！正如关于firefox keeping the page in cache without executing JS when clicking the back button 的另一个问题所指出的那样，在设置完所有内容并执行所有其他javascript 后，将触发一个事件-window 上的pageshow。
window.onpageshow = () =>
updateContent();
;
这不仅会在firefox中执行，即使在history back之后，Chrome也会在history back之后勾选checkbox，并且checkbox上的checked prop会处于正确的状态。
【讨论】：
以上是关于复选框仍然选中点击后退按钮，但它没有“选中”属性的主要内容，如果未能解决你的问题，请参考以下文章