How to make the checkbox unchecked by default always

Asked 18/7, 2013 at 19:52 Answered 12/5 at 19:44

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?

Morpheme answered 18/7, 2013 at 19:52 Comment(8)

Duplicate: #300311 – Humanize 18/7, 2013 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. – Unifoliolate 18/7, 2013 at 19:55

This is just a standalone html page – Morpheme 18/7, 2013 at 20:3

@Unifoliolate this is a browser feature to keep form fields filled in case of an accidental reload. – Paigepaik 18/7, 2013 at 20:4

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? – Unifoliolate 18/7, 2013 at 20:10

@Unifoliolate yes, that is the reason. – Paigepaik 18/7, 2013 at 20:11

@Morpheme any particular reason against using JavaScript? it would be just one attribute addition to the checkbox markup – Squash 18/7, 2013 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 – Morpheme 18/7, 2013 at 20:36

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

Damsel answered 19/7, 2013 at 9:37 Comment(0)

jQuery < 1.6

jQuery

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

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

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

Congius answered 26/8, 2015 at 14:24 Comment(1)

As of jquery 1.6, this should be .prop('checked', false). – Oxime 19/10, 2016 at 17:36

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

Eject answered 10/5, 2017 at 21:28 Comment(1)

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. – Whitver 11/5, 2017 at 1:30

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

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

Calva answered 23/6, 2019 at 19:2 Comment(0)

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

Malonylurea answered 20/9, 2014 at 9:36 Comment(0)

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.

Buell answered 19/7, 2013 at 9:45 Comment(3)

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. – Glace 19/7, 2013 at 9: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 – Buell 19/7, 2013 at 9: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. – Glace 19/7, 2013 at 10:9

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

Exercise answered 16/8, 2023 at 20:10 Comment(0)

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>

Triad answered 28/8, 2023 at 0:58 Comment(0)

I just did this with Hyperscript -

<input _="init on load set my @checked to False" 
         type="checkbox" checked="checked" class="checkbox" />

Paulo answered 12/5 at 19:44 Comment(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. – Drud 13/5 at 5:49

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

Underscore answered 21/4, 2014 at 12:6 Comment(2)

1. link to w3fools, 2. this link does not even give an answer. – Hypabyssal 20/5, 2016 at 1:44

3. checkbox's checked attribute is not used that way – Bagnio 29/1, 2017 at 16:27

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++