Why is a newly created checkbox checked when I set checked to false?

Question

When I put this code in my console, I end up with a checked box in my web page:

$('body').append($('<input/>', {
    type: 'checkbox',
    value: "foo",
    checked: false
}));

When I remove the checked attr altogether, the box is not checked:

$('body').append($('<input/>', {
    type: 'checkbox',
    value: "foo",                                                                  
}));

...but I need a dynamic set of checkboxes to be generated, some checked and some not. What attr/value creates the correct "unchecked" state?

UPDATE:

I am using the latest Chrome. jQuery version 3.2.1 The code works as expected in this fiddle: https://jsfiddle.net/mmvunhL0/ But not on my website... I'm wondering if there is a global setting or something touching the checkbox behavior.

What browser are you using? You're first example works for me in chrome/IE — Pat
– Pat, Commented Dec 13, 2017 at 17:58
using SO's version of jQuery (1.12) both examples append an unchecked checkbox. — Adam Jenkins
– Adam Jenkins, Commented Dec 13, 2017 at 17:59
XHTML allows checked to have a value. In HTML the checked attribute doesn't allow a value. I — bassxzero
– bassxzero, Commented Dec 13, 2017 at 17:59

nivanmorgan · Accepted Answer · 2017-12-13 18:11:14Z

3

You can use .prop or .attr for the checkbox

<div id="body">

</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>   
var value = true;

$('#body').append($('<input/>', {
                                    type: 'checkbox',
                                    value: "foo",
                                }).prop('checked', value) ) ;
                                
value = false;                                
$('#body').append($('<input/>', {
                                    type: 'checkbox',
                                    value: "foo",
                                }).prop('checked', value) );   
                                
</script>

edited Dec 13, 2017 at 18:11

answered Dec 13, 2017 at 18:10

nivanmorgan

1492 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bhojendra Rauniyar Over a year ago

Not exactly necessary to chain the method.

Intervalia · Accepted Answer · 2017-12-13 17:59:21Z

3

When used with the checkbox, the attribute checked is a boolean attribute.

If it exists at all then it is true.

<input type="checkbox" checked />

is the same as

<input type="checkbox" checked="false" />

and

<input type="checkbox" checked="checked" />

The only way to not have it checked is by not having the checked attribute at all.

answered Dec 13, 2017 at 17:59

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

2 Comments

pavel Over a year ago

In JS checked: false is correctly used as OP has. There is difference between checked: false and checked: "false".

JacobIRR Over a year ago

@panther is correct. I am following the rules of the API and checked:false should result in an unchecked box.

Bhojendra Rauniyar · Accepted Answer · 2017-12-13 18:16:57Z

0

You're getting unchecked on both of your code. Because, by default the checkbox is unchecked and if you want it to be checked explicitly, then define checked to true.

$('body').append($('<input/>', {
    type: 'checkbox',
    value: "foo",
    checked: true
}));

If you want it randomly, then you can use Math:

$('body').append($('<input/>', {
    type: 'checkbox',
    value: "foo",
    checked: Boolean(Math.round(Math.random()))
}));

Boolean is necessary here. It's because the property value strictly look for true of false value but not truthy or falsy value.

edited Dec 13, 2017 at 18:16

answered Dec 13, 2017 at 17:58

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Bhojendra Rauniyar Over a year ago

@mhodges That's html and in html if you just define checked attribute then that is identified by true status.

Collectives™ on Stack Overflow

Why is a newly created checkbox checked when I set checked to false?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related