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

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 http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button Just `window.onunload = function(){};` is sufficient — king_nak, Nov 16 '15 at 08:58
That sounds very good. Indeed, the problem is solved. Thank you @king_nak — Valérian Polizzi, Nov 16 '15 at 09:28

score 87 · Accepted Answer · answered Apr 30 '19 at 19:42

87

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

answered Apr 30 '19 at 19:42

CheeseFlavored

1,922
1
21
28

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. – osullic Mar 12 '21 at 23:53
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. – osullic Mar 12 '21 at 23:56
2

"Unlike other browsers, Firefox by default persists the dynamic checked state of an across page loads. Use the autocomplete attribute to control this feature." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox – BeeZee Mar 26 '21 at 13:55

user3649978 · Answer 2 · 2019-01-19T09:15:33.990

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>

score 1 · Answer 3 · answered Nov 16 '15 at 08:33

1

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.

answered Nov 16 '15 at 08:33

Matt The Ninja

2,641
4
28
58

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 – Valérian Polizzi Nov 16 '15 at 08:58
Use JS to fetch http params and apply/clear checkbox as appropriate then? Sorry i think i misunderstood your first question. – Matt The Ninja Nov 16 '15 at 09:12

score 1 · Answer 4 · answered Apr 13 '21 at 22:08

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.

this is not working in my case – bareMetal Mar 28 '22 at 10:05 — bareMetal, Mar 28 '22 at 10:05

score 0 · Answer 5 · answered Mar 09 '23 at 19:23

0

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);

answered Mar 09 '23 at 19:23

Diego Ferraz

1
1

1

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](/help/how-to-answer). – Community Mar 15 '23 at 04:00

score -2 · Answer 6 · edited May 23 '17 at 10:31

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

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

6 Answers6