Check/Uncheck checkbox jQuery

Question

I have a situation where I get the following in JavaScript:

$('<input type="checkbox" name="checkbox1" value="12345">').prop('checked',true);

The above doesn't check the checkbox at all. Also tried:

$('<input type="checkbox" name="checkbox1" value="12345">').attr('checked','checked');

When I do this, I get the value:

$('<input type="checkbox" name="checkbox1" value="12345">').val();

The following is contained in an array:

<input type="checkbox" name="checkbox1" value="12345">

So I usually call above as:

$(data[0]).val();

Why doesn't checking/unchecking using prop or attr work?

possible duplicate of [How do I check a checkbox with jQuery?](http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery) — hsz, Jun 12 '14 at 13:09
It is indeed checking it. The selector you are using is creating a new `input` element in memory. It's not selecting the one on screen... — War10ck, Jun 12 '14 at 13:10
http://jsbin.com/gofate/1/edit Your code is working. Are you adding it to the page? You need to append it to the page. — mohamedrias, Jun 12 '14 at 13:15
I think @War10ck is right, because I don't see the change on screen, I do however see the data etc in the console in chrome. — user3036342, Jun 12 '14 at 13:26
It has nothing to do with memory. You can add the element to the document and it will still have the same result. It has to do the fact properties are not attributes. — epascarello, Jun 12 '14 at 13:42
no epascarello, it worked before no problem, it looks like it has something to do with DataTables not updating. need to use fnUpdate — user3036342, Jun 12 '14 at 14:03

epascarello · Accepted Answer · 2014-06-12T13:22:08.980

The checkbox IS checked.

var elem = $('<input type="checkbox" name="checkbox1" value="12345">').prop('checked',true);
console.log(elem.prop("checked"));  //true
console.log(elem[0]);   //<input type="checkbox" name="checkbox1" value="12345">

The DOM does not magically add the property as an attribute when you inspect it. If you want the HTML to update, you would have to add an attribute

var elem = $('<input type="checkbox" name="checkbox1" value="54321">').attr("checked","checked");
console.log(elem.prop("checked"));  //true
console.log(elem[0]);  //<input type="checkbox" name="checkbox1" value="12345" checked="checked">

JSFiddle

The DOM still won't update in this case. The selector is creating an element not selecting one... — War10ck, Jun 12 '14 at 13:30

Govind Singh · Answer 2 · 2014-06-12T13:17:10.047

0

$('#IDOFCHECKBOX').prop('checked',true);

check this for .prop()

check this for id selector

for select by name you can use

$('input[type=checkbox][name="checkbox1"]').prop('checked', true)

edited Jun 12 '14 at 13:17

answered Jun 12 '14 at 13:09

Govind Singh

15,282
14
72
106

Is there any festival of downvoting – Govind Singh Jun 12 '14 at 13:25
I didn't downvote you but what is the top line of code in reference to? I can't seem to find that `id` anywhere... – War10ck Jun 12 '14 at 13:29

score 0 · Answer 3 · answered Dec 01 '14 at 09:24

It certainly is in jQuery 1.6+

Use the new .prop() function:

$('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false);

jQuery 1.5 and below

The .prop() function is not available, so you need to use .attr().

To check the checkbox (by setting the value of the checked attribute) do

$('.myCheckbox').attr('checked','checked');

and for un-checking (by removing the attribute entirely) do

$('.myCheckbox').removeAttr('checked');

Any version of jQuery

If you're working with just one element, it will always be fastest to use DOMElement.checked = true. The benefit to using the .prop() and .attr() functions is that they will operate on all matched elements.

// Assuming an event handler on a checkbox if (this.checked)

score -1 · Answer 4 · answered Jun 12 '14 at 13:10

You should use a proper jQuery selector, eg:

$('#checkboxId').prop('checked',true);

Here's a list of the existing selectors:

http://api.jquery.com/category/selectors/

Most of the CSS selectors will work, eg:

.class to select Classes
#id to select by Ids
> to select direct childrens
[attr=value] to select by attribute value

score -2 · Answer 5 · answered Jun 12 '14 at 13:20

-2

Any one of this could check the check box for you

$('#chk1').prop('checked','checked')

$('#chk1').prop('checked',true)

answered Jun 12 '14 at 13:20

Vivekh

4,141
11
57
102

Check/Uncheck checkbox jQuery

5 Answers5