复选框仍然选中点击后退按钮,但它没有 "checked" 属性
Checkbox still checked hitting the back button, but it has no "checked" attribute
我正在为电子商务开发一个基于复选框的过滤器。
一切正常,但是当我尝试通过后退按钮返回时,复选框仍然选中,没有任何选中的属性。
我注意到 "issue" 发生在 :
- 野生动物园
- Chrome
我找到的唯一方法就是重新加载页面。但是"user-went-back"事件好像抓不到,我也不想每一个页面都刷新。
将我的所有复选框设置为默认值毫无意义。
禁用 Chrome 缓存无效。
我不知道我的代码示例是否有用
编辑:这是我的第一个 post 所以一定要告诉我为什么我的问题似乎不清楚
使用 Javascript 清理表格,使用 jQuery 这样的框架可能会更快。
然后像这样...
$( document ).ready(function() {
$(':input').val(''); //This would clear all inputs.
});
因此,当文档完成加载时,它将清除所有输入。
在 body 加载时使用以下函数。
<body onLoad="uncheck()">
<script>
function uncheck() {
$(':checkbox:checked').prop('checked',false);
//or you can also use removeAttr
//$(':checkbox:checked').removeAttr('checked');
}
</script>
检查 prop and removeAttr 了解更多详情
或者你也可以使用下面的代码
<script>
$( document ).ready(function() {
$(':checkbox:checked').prop('checked',false);
//$(':checkbox:checked').removeAttr('checked');
});
</script>
查看 .ready 了解更多详情。
或
如果您想清除所有输入字段,这里有详细解释的答案:Resetting a multi-stage form with jQuery
我知道这是一个老问题,但有人可能 "Google" 同样的问题并落在这里,就像我做的一样。在 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>
有一个疯狂的技巧可以解决这个问题。将 autocomplete='off'
添加到您的复选框。听起来很疯狂,但确实有效!
我也有这个问题,但想保持选中状态(并调整页面状态)。我遇到的问题是 chrome 只是在 JavaScript 为 运行 之后更改了复选框的选中状态,包括加载事件,而没有触发任何进一步的事件(如更改或输入)。
有活动吗?不!正如关于 firefox keeping the page in cache without executing JS when clicking the back button 的另一个问题所指出的,有一个事件将在所有设置和所有其他 javascript 执行后触发 - pageshow on window.
window.onpageshow = () => {
updateContent();
};
这不仅会在 firefox 中执行,即使在 history back 之后,而且 Chrome 在 history back 后检查复选框后,复选框上的 checked prop 将处于正确状态。
我正在为电子商务开发一个基于复选框的过滤器。 一切正常,但是当我尝试通过后退按钮返回时,复选框仍然选中,没有任何选中的属性。
我注意到 "issue" 发生在 :
- 野生动物园
- Chrome
我找到的唯一方法就是重新加载页面。但是"user-went-back"事件好像抓不到,我也不想每一个页面都刷新。
将我的所有复选框设置为默认值毫无意义。
禁用 Chrome 缓存无效。
我不知道我的代码示例是否有用
编辑:这是我的第一个 post 所以一定要告诉我为什么我的问题似乎不清楚
使用 Javascript 清理表格,使用 jQuery 这样的框架可能会更快。 然后像这样...
$( document ).ready(function() {
$(':input').val(''); //This would clear all inputs.
});
因此,当文档完成加载时,它将清除所有输入。
在 body 加载时使用以下函数。
<body onLoad="uncheck()">
<script>
function uncheck() {
$(':checkbox:checked').prop('checked',false);
//or you can also use removeAttr
//$(':checkbox:checked').removeAttr('checked');
}
</script>
检查 prop and removeAttr 了解更多详情
或者你也可以使用下面的代码
<script>
$( document ).ready(function() {
$(':checkbox:checked').prop('checked',false);
//$(':checkbox:checked').removeAttr('checked');
});
</script>
查看 .ready 了解更多详情。
或
如果您想清除所有输入字段,这里有详细解释的答案:Resetting a multi-stage form with jQuery
我知道这是一个老问题,但有人可能 "Google" 同样的问题并落在这里,就像我做的一样。在 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>
有一个疯狂的技巧可以解决这个问题。将 autocomplete='off'
添加到您的复选框。听起来很疯狂,但确实有效!
我也有这个问题,但想保持选中状态(并调整页面状态)。我遇到的问题是 chrome 只是在 JavaScript 为 运行 之后更改了复选框的选中状态,包括加载事件,而没有触发任何进一步的事件(如更改或输入)。
有活动吗?不!正如关于 firefox keeping the page in cache without executing JS when clicking the back button 的另一个问题所指出的,有一个事件将在所有设置和所有其他 javascript 执行后触发 - pageshow on window.
window.onpageshow = () => {
updateContent();
};
这不仅会在 firefox 中执行,即使在 history back 之后,而且 Chrome 在 history back 后检查复选框后,复选框上的 checked prop 将处于正确状态。