Check If A Checkbox Is Checked With jQuery

Image for post

How do you check if a checkbox is checked with jQuery? No, it?s not a tongue-twister! Let?s say you?ve got this input:

<input type=”checkbox” name=”agree” checked>I agree to stuff

It?ll be checked by default because of the checked attribute. jQuery allows you to check a DOM element?s attribute through the .attr() method e.g.:

$(‘input[type=checkbox]’).attr(‘checked’);

So we can just check the checked attribute and that will tell us?

Not exactly. The checked attribute simply tells you whether the checkbox is checked or not by default when the page is rendered. It does not tell you the current state of the checkbox.

$(‘input[type=checkbox]’).attr(‘checked’);// Returns ?true? if present on the element, returns undefined if not present

To check the current state of the checkbox you must instead use the checked property. It is dynamically updated as the user checks/unchecks. jQuery allow you to check a property with the .prop() method like so:

$(‘input[type=checkbox]’).prop(‘checked’);// Returns true if checked, false if unchecked.

We go into much more detail and show a live example in the video below.