Check if Checkbox is Checked Using jQuery prop()

Determining whether a checkbox is checked is a common task in web development for handling user input, form validation, and dynamic UI updates. In jQuery, the recommended way to inspect the state of a checkbox is using the .prop() method. This article explains how to use .prop('checked') to retrieve a checkbox's boolean status, how to handle state changes dynamically, and why this method is preferred over older alternatives.

Basic Syntax

To check the status of a checkbox, select the element using a jQuery selector and call .prop('checked'). This method returns a boolean value: true if the checkbox is checked, and false if it is unchecked.

let isChecked = $('#myCheckbox').prop('checked');

if (isChecked) {
    console.log('The checkbox is checked.');
} else {
    console.log('The checkbox is not checked.');
}

Checking State on User Interaction

To detect when a user toggles the checkbox, bind an event handler to the change event. Inside the event callback, you can reference the clicked element using $(this).

$('#myCheckbox').on('change', function() {
    if ($(this).prop('checked')) {
        console.log('Checkbox was just checked.');
    } else {
        console.log('Checkbox was just unchecked.');
    }
});

Checking Multiple Checkboxes

If you are working with a group of checkboxes sharing a class or name attribute, you can iterate through them or evaluate specific elements:

$('.item-checkbox').each(function() {
    if ($(this).prop('checked')) {
        console.log('Selected value:', $(this).val());
    }
});

Why Use .prop() Instead of .attr()?

In jQuery 1.6 and later, .prop() is the standard method for retrieving DOM properties such as checked, disabled, and selected.

• .prop('checked') returns the current, dynamic boolean state (true or false) of the element in the DOM.
• .attr('checked') returns the initial HTML attribute value defined in the markup, which does not reliably reflect changes made by the user after the page loads.

Using .prop('checked') ensures your code always reflects the real-time state of the input element.