选中/取消选中复选框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?

Answer 1

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

Answer 2

$('#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)

Answer 3

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)

Answer 4

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

Answer 5

Any one of this could check the check box for you

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

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