Checkbox still checked hitting the back button, but it has no "checked" attribute

Question

I am working on a checkbox-based filter for a e-commerce. Everything works fine but when I attempt to go back via the back button, the checkboxes still checked without any checked attribute.

I noticed that this "issue" is occurring on :

• Safari
• Chrome

---

The only way I found is just to reload the page. But the "user-went-back" event doesn't seems to be catchable, and I don't want to refresh every single page.

Setting all my checkbox to default makes no sense.

Disabling Chrome cache has no effect.

---

I don't know if samples of my code would be useful

EDIT : it's my very first post so make sure to tell me why my question seems unclear

Answer 1

There's a crazy trick to fix this problem. Add autocomplete='off' to your checkboxes. Sounds crazy, but it works!

Answer 2

I know this is an old question but someone might "Google" the same question and lands here, just how I did. In 2019 Chrome 71 still has this behaviour so it's something not going away anytime soon. In the meantime here is a script to easily adjust the checked state to the checked attribute.

<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 3

Use Javascript to clean the form, probably quicker using a framework like jQuery. Then something like this...

$( document ).ready(function() {
    $(':input').val(''); //This would clear all inputs.
});

So when the document finishes loading it will clear all the inputs.