HTML checkboxes keep checked after refresh

Question

I have a couple of check boxes in my markup.. For example:

<input type="checkbox" id="someCheckbox"/>

If I refresh the page with Ctrl+Shift+R everything is OK - the page renders unchecked check boxes, however if some of them were checked and I refresh with F5 they stay in their previous state.

Setting the checked attribute doesn't work since having the attribute is enough to make it checked, the value is more or less irrelevant..

How can I force them to be unchecked on page load, please?

A cursory search turned up this: http://stackoverflow.com/questions/299811/why-does-the-checkbox-stay-checked-when-reloading-the-page — Mitya, Apr 11 '16 at 10:59
That sounds like a feature of your browser, keeping form values in place in case of an accidental reload. Is this really something you absolutely need to override? — Pekka, Apr 11 '16 at 11:00

score 61 · Accepted Answer · answered Apr 11 '16 at 11:12

61

I've found a solution which uses only HTML. If you add the autocomplete="off" attribute to the element it won't set the previous state after refresh..

<input type="checkbox" id="foo" autocomplete="off"/>

answered Apr 11 '16 at 11:12

Dropout

13,653
10
56
109

I did but it is now working for me, means when refresh it goes?rows.push('' + id + '' + value.machine + '' + value.state + '' + value.date_processed + ''); }); – Ratha Oct 19 '17 at 01:18
Helpful when your goal is to untick the checkbox upon page reloading or by clicking the back button – Andoy Abarquez Jan 30 '20 at 12:53
1

This just saved my day. Every day we learn and I learned this important thing. Thank you. – Chipsy Jun 08 '21 at 07:31

score 2 · Answer 2 · answered Apr 11 '16 at 11:03

2

You could set them back with javascript

var elements = document.getElementsByTagName("INPUT");
for (var inp of elements) {
    if (inp.type === "checkbox")
        inp.checked = false;
}

answered Apr 11 '16 at 11:03

Bálint

4,009
2
16
27

score -1 · Answer 3 · answered Apr 11 '16 at 11:16

In hTML there is only checked attribute which force the checkbox to retain checked. and by default the check boxes are unchecked.If you want to force unchecked after load then don't use. One Important thing some time it also depend on browser. for more detail refer http://www.w3schools.com/html/html_form_input_types.asp

HTML checkboxes keep checked after refresh

3 Answers3