Setting "checked" for a checkbox with jQuery

Asked : Nov 17

Viewed : 21 times

I'd like to do something like this to tick a checkbox using jQuery:

$(".myCheckBox").checked(true);

or

$(".myCheckBox").selected(true);
javascript jquery checkbox selected checked 

Nov 17

4 Answers

Modern jQuery

Use .prop():

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

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

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

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

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behavior of a call to .reset() on any form that contains it – a subtle but probably unwelcome behavior change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

answered Jan 10


Input Checkbox checked Property

Example

Set the checked state of a checkbox:

function check() {
    document.getElementById("myCheck").checked = true;
}

function uncheck() {
    document.getElementById("myCheck").checked = false;
}

Definition and Usage

The checked property sets or returns the checked state of a checkbox.

This property reflects the HTML checked attribute.

answered Jan 10


Javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

answered Jan 10


Inspect the checked property of the element.

Say you have this checkbox:

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

You can see if it’s checked using

document.querySelector('.checkbox').checked

You can also check if looking for .checkbox:checked does not return null:

document.querySelector('.checkbox:checked') !== null

but I think looking for .checked is cleaner.

Do NOT use getAttribute() looking for the checked attribute value, because that’s always true if the checkbox is checked by default in this way:

<input type="checkbox" checked />

Also, don’t check for the value of a checkbox element. It’s always on, regardless of whether the checkbox is checked or not.

answered Jan 10


Login and Submit Your Answer
Browse other questions tagged  javascript  jquery  checkbox  selected  checked or ask your own question.