Checkbox checked Property

You may also like to see:

• Best Resources to learn JavaScript

• JavaScript : Prototype Property and Inheritance

If you are working on web application have checkbox input on your page then you might need to check whether the checkbox is currently checked or not for applying some condition. There are many ways to check that is checkbox is checked or not.

Lets firstly see the pure JavaScript ways to check the property. In JavaScript after selecting the particular element you can easily check with checked property.

Lets see a demo, there is checkbox in your page with some unique Id i.e, myCheckBox  in following case.

<input type="checkbox" id="myCheckBox"/>

Now in JavaScript you firstly select the element and then get its checked property.

document.getElementById('myCheckBox').checked;

firstly we selected element by Id then we checked the property it will return true in case if check box is checked.

See here demo.

If you are working with jQuery and don't want to use pure JavaScript for this check then you have multiple ways to check this property:

using is(':checked')

You can use the function is() of jQuery to perform this action, what this function do is its check the selected element or set of elements for a condition you passed as argument and returns true if condition satisfied else false.

So to use is() firstly we need to select element than check for :checked selector which works for checkboxes, radio-buttons, and select elements.

$('#myCheckBox').is(':checked');

Here is demo

using prop()

Prior to jQuery 1.6  function attr() was used to get the property and attributes both according to element but it was confusing so after jQuery 1.6 new functio prop() was introduced to check the current property value of element.

Here firstly we need to know the difference between properties and attributes, Attributes are values we set in Html like we set the input textbox value to some initial text so you have set the attribute value but once page is loaded in browser and you changed the text of textbox. Here the difference will be visible on this moment attribute will still be the same you have provided in html while property will be updated with the updated value of textbox.

Here is textbox with attribute set with default text:

<input type="text" id="myTextBox" value='set attribute value' /> 

Now in jQuery try this:

console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
console.log('Property Value is : '+$('#myTextBox').prop('value'));

Here is demo.

So lets say you have set checked attribute in html so on first time loading your checkbox get checked by default. So now attr() will always return the `checked` for $('#myCheckBox').attr('checked')  as it was provided in html(or updated later but not the current state). So you need to check it with prop() which will provide always the updated value.

Here is example using prop()

$('#myCheckBox').prop('checked');

Here is Demo which also show the fixed value provided by attr() if we set it in html.

using filter :checked

Another way to check the property is to use filter :checked in selector and then check for the length of elements. It is not recommended way and give you wrong output in case if you are working with class instead of id and there are more than one input radio button, checkbox or select elements on same page.

var isChecked = $('#myCheckBox:checked').length > 0;

Here is demo

So we have seen multiple ways of checking the checked property of checkbox. This is the thing which web developers usually have to use and cause of confusion in some scenario to select the correct way to use it.

Please give your feedback and suggestions for the articles in comments.

You may also like to see:

• Best Resources to learn JavaScript

• JavaScript : Prototype Property and Inheritance