Question

我正在开发一个基于复选框的电子商务过滤器。一切正常，但当我尝试通过后退按钮返回时，复选框仍然选中，没有任何选中的属性。

我注意到这个“问题”发生在：

Safari浏览器
铬

我找到的唯一方法就是重新加载页面。但“用户返回”事件似乎不可捕获，我不想刷新每一页。

将我的所有复选框设置为默认值是没有意义的。

停用Chrome缓存无效。

我不知道我的代码样本是否有用

编辑：这是我的第一篇文章，所以一定要告诉我为什么我的问题似乎不清楚

Answer 1

我知道这是一个古老的问题，但是有人可能会“谷歌”同样的问题，然后按照我的做法登陆此处。在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>

Answer 2

使用Javascript清理表单，使用像jQuery这样的框架可能更快。然后是这样的......

scope.downloadFile = function (fileId) {
    //Show loading screen (Here loading screen works).  
    scope.loadingProjectFiles=true;                 
    var FileResource = $resource('/api/files/:idParam', {idParam:'@id'});
    //Make server call to retrieve a file
    var yourFile = FileResource.$get({ id: fileId }, function () {
        //Now (inside this callback) the response data is loaded inside the yourFile variable
        //I know it's an ugly pattern but that's what $resource is about...
        DoSomethingWithYourFile(yourFile);
        //Hide loading screen
        scope.loadingProjectFiles=false;
    });
 };

因此，当文档完成加载时，它将清除所有输入。

Answer 3

在身体负荷上使用以下功能。

<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

Answer 4

有一个疯狂的技巧可以解决此问题。将autocomplete='off'添加到您的复选框。听起来很疯狂，但是有效！

Answer 5

我也有这个问题，但想保持选中状态（并调整页面状态）。我遇到的问题是，chrome 在运行 JavaScript 后仅更改了复选框的选中状态，包括加载事件，而没有触发任何其他事件（例如更改或输入）。

有什么活动吗？不！正如关于 firefox keeping the page in cache without executing JS when clicking the back button 的另一个问题所指出的那样，有一个事件将在设置完所有内容并执行所有其他 javascript 后触发 - 窗口上的页面显示。

window.onpageshow  = () => {
    updateContent();
};

这不仅会在历史返回后在firefox中执行，而且在历史返回后Chrome检查复选框后也会执行，并且复选框上的checked prop将处于正确状态。

复选框仍然检查按下后退按钮，但它没有“已选中”属性

5 个答案: