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

Bysshe

Watch out if you use the ready event (as Matt The Ninja and Suyog suggest). It will not be triggered on back, unless you specify a onunload handler. see #158819 Just window.onunload = function(){}; is sufficient – Altdorfer

That sounds very good. Indeed, the problem is solved. Thank you @Altdorfer – Deville

Answer 1

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

Hitandmiss

This does not seem like a good solution, even if it works. Sounds almost like you are taking advantage of a bug. What if the "bug" gets fixed in future browsers? Crazy answers need an explanation, and a rational answer wins over a crazy answer every day. – Heuer

It sounds to me like the OP is reading the input element's checked attribute, when s/he should be reading its checked property. The checked attribute only specifies how the checkbox should be initialised, but browsers remember form state when you navigate forwards/backwards. The checked property should match how the browser is currently rendering the checkbox. – Heuer

"Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the autocomplete attribute to control this feature." developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… – Elise

I don't think this to be a good solution because browsers do keep memory of changes a user has made to UI controls (including text typed in textboxes) and by setting autocomplete='off' on checkboxes you are preventing checkboxes from being brought back to their final state. In other words, you would have an inconsistent state, with all controls brought back to their final state apart checkboxes which will be displayed in their default/initial state on each page. – Gaslit

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>

Elbert

Answer 3

I had this issue as well, but wanted to keep the checked status (and just adjust the page state to it). I had the problem that chrome just changed the checked state of the checkbox after the JavaScript is run, including the load event, without firing any further events (like change or input).

Any events? No! As another question about firefox keeping the page in cache without executing JS when clicking the back button pointed out, there is an event which will be fired after everything is set and every other javascript is executed - pageshow on window.

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

This will not only be executed in firefox even after history back, but also after Chrome checks the checkbox after history back, and the checked prop on the checkbox will be in the correct state.

Wheeled

this is not working in my case – Hush

Answer 4

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.

Ecbolic

The fact is my checkboxes act as filters in this situation. Clear all checkbox after the page is loaded makes no point because it would recover what checkbox should be check via $_REQUEST – Deville

Use JS to fetch http params and apply/clear checkbox as appropriate then? Sorry i think i misunderstood your first question. – Ecbolic

Answer 5

If anyone still needs a solution.

As I needed to get the values ​​of the inputs, the solution I found was to put the function inside the setTimeout

So when it fires, the values ​​are captured.

setTimeout(load, 0);

Troposphere

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bughouse

Answer 6

Use following function on body load.

<body onLoad="uncheck()">

<script>
    function uncheck() {
        $(':checkbox:checked').prop('checked',false);
        //or you can also use removeAttr
        //$(':checkbox:checked').removeAttr('checked');
    }
</script>

Check prop and removeAttr for more details

Or you can also use following code

<script>
$( document ).ready(function() {
    $(':checkbox:checked').prop('checked',false);
    //$(':checkbox:checked').removeAttr('checked');
});
</script>

Check .ready for more details.

OR

In case you want to clear all the input fields, here is the answer for that with detailed explanation: Resetting a multi-stage form with jQuery

Spang