Why my code to set the checked state of a checkbox with query doesn't work?

Question

Why this works

    document.getElementById("myCheckbox").checked = false;

whereas this doesn't with jquery:

    $("myCheckbox").attr("checked") = false;

Google the basic questions. There are thousands of questions on stackoverflow same like this. — Mohit Jain, Mar 23 '12 at 20:42

score 5 · Accepted Answer · edited May 23 '17 at 12:11

5

There are a couple of things wrong with your code. First of all, you select elements in jQuery using selectors, just like in CSS. So you need to turn this

$("myCheckbox")

into this, using the hash (#) for ID selector

$("#myCheckbox")

Secondly, jQuery doesn't really use properties, but methods for everything. Pass one parameter to get a value, two to set it. In this case, you also want to be using prop and not attr. So you would need to do:

$("#myCheckbox").prop("checked", false);

Live example

edited May 23 '17 at 12:11

Community

1
1

answered Mar 23 '12 at 19:45

Alex Turpin

46,743
23
113
145

thanks but what diff between prop("checked",false) and attr("checked",false). since attr is closer to my original question I checked it as good answer but maybe prop is better somehow ? – user310291 Mar 23 '12 at 20:11
I explained exactly that in my answer, and even linked you to a full in-depth explanation. Basically, the vanilla JavaScript code you have is changing the property, not the attribute. The equivalent in jQuery is what I gave you. Always use `prop` unless you understand perfectly the difference between it and `attr`. You can also read the comments in the answer you accepted where the answerer himself admitted that "props are the way to go". "attr" isn't closer to your question, it's only closer to your attempt at answering it. – Alex Turpin Mar 23 '12 at 20:33
Oops sorry I didn't realize there was a link explaining the diff between attr prop. Thanks. – user310291 Mar 23 '12 at 22:27

score 3 · Answer 2 · edited Mar 23 '12 at 19:52

3

You're missing a # to indicate that myCheckbox is an id, also you cannot set an attribute value directly like that, pass the value as second parameter:

 $("#myCheckbox").attr("checked", false);

Also see the docs: ID Selector (“#id”)

edited Mar 23 '12 at 19:52

Alex Turpin

46,743
23
113
145

answered Mar 23 '12 at 19:43

BrokenGlass

158,293
28
286
335

That's weird. I was the one to downvote your answer. You now edited it to fix your mistake, and the comment highlighting it was deleted. However, it doesn't show as an edit, so I can't "un-downvote". Edit: I fixed a typo in your post and was able to un-downvote. – Alex Turpin Mar 23 '12 at 19:51
In the first 5 minutes you can edit your answer w/o it showing as an edit - and that's fine, I deserved the downvote with that initial answer - props are the way to go anyway. – BrokenGlass Mar 23 '12 at 19:52

score 1 · Answer 3 · answered Mar 23 '12 at 19:45

1

$("#myCheckbox").attr('checked','checked');
and
$("#myCheckbox").removeAttr('checked');

answered Mar 23 '12 at 19:45

David Houde

4,835
1
20
29

The Alpha · Answer 4 · 2012-03-23T19:57:46.423

To check the checkbox using jquery

$("#myCheckbox").attr( "checked" , true );

Or uncheck it

$("#myCheckbox").attr( "checked" , false );

It'll work if your checkbox has id set to myCheckbox i.e. id="myCheckbox" but if your checkbox has class set to myCheckbox i.e. class="myCheckbox" then change your selector to

$('.myCheckbox') // here . used to specify class name.

To check all checkboxes use

$("input:checkbox").attr( "checked" , true ); // or set false to uncheck

or if you want to check or uncheck using name attribute then

$("input:checkbox[name='mychk']").attr( "checked" , true ); // if 'mychk' is name of the checkbox it'll be checked

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

0

you want to do this :

 $("#myCheckbox").attr("checked", "checked");

dont miss the # aswell.

answered Mar 23 '12 at 19:46

Pheonix

6,049
6
30
48

Why my code to set the checked state of a checkbox with query doesn't work?

5 Answers5