How to make the checkbox unchecked by default always

Question

I have 2 checkboxes inside a form and both those checkboxes were wrapped inside a form.

For one of form I have added the attribute autocomplete="off".
Below is the code snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
        <form name="chkBoxForm" >
            <div>
                <input type="checkbox" value="100" name="product"/>My Checkbox1
            </div>
        </form>
        <form name="chkBoxForm" autocomplete="off">
            <div>
                <input type="checkbox" value="200" name="product"/>My Checkbox2                         
            </div>
        </form>
    </body>
</html>

Now my problem here if we check those checkboxes manually and if we press F5, then the checkbox with attribute autocomplete="off" got unchecked. But the checkbox which doesn't have that attribute remains checked. This happens in FireFox 22.

This behavior varies from Browser to Browser.
In IE, both the checkboxes remains checked and in Chrome both the checkboxes were unchecked.

But when I press enter in the address bar, it gets unchecked in all the browsers.

Can someone tell me how to have those checkboxes unchecked always when we press F5?
I am aware that this can be handled through Javascript.

Is there any other html way of handling this?

Duplicate: http://stackoverflow.com/questions/299811/why-does-the-checkbox-stay-checked-when-reloading-the-page — Maxim Zhukov, Jul 18 '13 at 19:55
What context is this html form running under? I mean, is this for an asp.net application, or something else? As far as I know, when you reload the page, unless you have a cookie or a viewstate, the checkboxes will revert to their default state. — Zack, Jul 18 '13 at 19:55
@Zack this is a browser feature to keep form fields filled in case of an accidental reload. — t.niese, Jul 18 '13 at 20:04
Maybe the difference in behavior is from pressing enter being considered a *new* page load, as opposed to hitting f5 being considered a *re*-load? — Zack, Jul 18 '13 at 20:10
@Vel any particular reason against using JavaScript? it would be just one attribute addition to the checkbox markup — Yuriy Galanter, Jul 18 '13 at 20:16
@YuriyGalanter There is nothing against JavaScript.Since I was aware of that solution, I just want to know is anything can be done through html itself — Vel, Jul 18 '13 at 20:36

David Fariña · Accepted Answer · 2021-06-16T11:03:13.023

No, there is no way in simple HTML. Javascript might be your only solution at this time..

Loop through all inputs in javascript, check if they're indeed a checkbox and set them to unchecked:

var inputs = document.getElementsByTagName('input');

for (var i=0; i<inputs.length; i++)  {
  if (inputs[i].type == 'checkbox')   {
    inputs[i].checked = false;
  }
}

wrap it up in a onload listener and you should be fine then :)

score 18 · Answer 2 · edited Jan 25 '23 at 07:58

jQuery < 1.6

jQuery

$('input[type=checkbox]').removeAttr('checked');

Or

<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/> 

<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/> 
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/> 

$('input.inputUncheck').removeAttr('checked');

jQuery >= 1.6 (pointed out by Wilfred Hughes)

jQuery

$('input[type=checkbox]').prop('checked', false);

Or

<!-- checked -->
<input type='checkbox' name='foo' value='bar' checked=''/> 

<!-- unchecked -->
<input type='checkbox' class='inputUncheck' name='foo' value='bar' checked=''/> 
<input type='checkbox' class='inputUncheck' name='foo' value='bar'/> 

$('input.inputUncheck').prop('checked', false);

As of jquery 1.6, this should be `.prop('checked', false)`. – Wilfred Hughes Oct 19 '16 at 17:36 — Wilfred Hughes, Oct 19 '16 at 17:36

score 8 · Answer 3 · edited Jan 25 '23 at 05:46

8

If you have a checkbox with an id checkbox_id, you can set its state with JS with prop('checked', false) or prop('checked', true)

$('#checkbox_id').prop('checked', false);

edited Jan 25 '23 at 05:46

TarHalda

1,050
1
9
27

answered May 10 '17 at 21:28

Ilker Baltaci

11,644
6
63
79

3

**From review queue**: May I request you to please add some more context around your answer. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post. – RBT May 11 '17 at 01:30

score 3 · Answer 4 · edited Apr 10 '19 at 08:52

One quick solution that came to mind :-

<input type="checkbox" id="markitem" name="markitem" value="1" onchange="GetMarkedItems(1)">
<label for="markitem" style="position:absolute; top:1px; left:165px;">&nbsp</label>
<!-- Fire the below javascript everytime the page reloads -->
<script type=text/javascript>
  document.getElementById("markitem").checked = false;
</script>
<!-- Tested on Latest FF, Chrome, Opera and IE. -->

score 3 · Answer 5 · answered Jun 23 '19 at 19:02

3

An easy way , only HTML, no javascript, no jQuery

<input name="box1" type="hidden"   value="0" />
<input name="box1" type="checkbox" value="1" />

answered Jun 23 '19 at 19:02

Ann

189
1
8

score 2 · Answer 6 · edited May 23 '17 at 11:47

2

This is browser specific behavior and is a way for making filling up forms more convenient to users (like reloading the page when an error has been encountered and not losing what they just typed). So there is no sure way to disable this across browsers short of setting the default values on page load using javascript.

Firefox though seems to disable this feature when you specify the header:

Cache-Control: no-store

See this question.

edited May 23 '17 at 11:47

Community

1
1

answered Jul 19 '13 at 09:45

Mel

3,058
4
26
40

I dont think thats a good solution as you said, if an error appears, the user has to type in everything again. Using javascript will not touch the input text fields while still setting what you want to your desired state. – David Fariña Jul 19 '13 at 09:46
@David Agreed. I don't think disabling this feature is a good idea at all (by javascript or the cache header). If the user has changed the value, then chances are, he or she will put in the same value again if the page was refreshed for some reason. But this is what the OP was asking for – Mel Jul 19 '13 at 09:50
Yeah sure, but with the javascript solution, you still have full control of what to reset. This way you could simply reset checkboxes but leave the textfields as they are. – David Fariña Jul 19 '13 at 10:09

score 0 · Answer 7 · answered Aug 16 '23 at 20:10

The problem is that the HTML input can be checked at the page load, without having the attribute checked. The browser does use some extra user related caching, and we simply can't control that.

Using JavaScript, what we can do is to force set the checked attribute to go to false.

(() => {(myinput.checked) ? myinput.click() : null})()

<input type=checkbox id="myinput" checked /> Unchecked on load

score 0 · Answer 8 · answered Aug 28 '23 at 00:58

For me, ending input tags with /> gave unchecked checkboxes as the default behaviour. Ending tags with only > (annoyingly) seemed to default to checked boxes regardless of the checked flag in the elements.

Illustrative examples:

Unchecked by default

<input type="checkbox" id="myid1" name="checkbox1" />

Checked

<input type="checkbox" id="myid2" name="checkbox2" checked />

Oddly, also checked

<input type="checkbox" id="myid3" name="checkbox3">

And again, still checked

<input type="checkbox" id="myid4" name="checkbox4" checked>

score -4 · Answer 9 · answered Apr 21 '14 at 12:06

-4

Well I guess you can use checked="false". That is the html way to leave a checkbox unchecked. You can refer to http://www.w3schools.com/jsref/dom_obj_checkbox.asp.

answered Apr 21 '14 at 12:06

user2237777

5

1. link to w3fools, 2. this link does not even give an answer. – Cyril Duchon-Doris May 20 '16 at 01:44
3

3. checkbox's checked attribute is not used that way – Jan 29 '17 at 16:27