How To Check If A Checkbox Is Checked Using JQuery

I was working on a project for one of my clients, and I needed to validate if users had checked specific boxes before form submission. The issue is, many developers struggle with handling checkbox states efficiently in jQuery.

In this article, I will cover three simple methods you can use to check if a checkbox is checked using jQuery (one using the .is() method, one using the .prop() method, and one using the: checked selector).

So let’s get into the topic..

Method 1 – Use the jQuery .is() Method

The .is() method in jQuery is one of the easiest ways to check if a checkbox is checked. I use this method often because of its readability and simplicity.

I have given HTML code to create a basic structure of a check box:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox Check</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <input type="checkbox" id="myCheckbox"> Accept Terms

    <button id="checkBtn">Check</button>

    <!-- This element is needed for the message -->
    <p id="output" style="margin-top: 10px; font-weight: bold;"></p>

    <script src="script.js"></script>

</body>
</html>

I executed the above example code and added the screenshot below.

Here’s how you can implement it in the script.js file:

$(document).ready(function() {
    $("#checkBtn").on("click", function() {
        if ($("#myCheckbox").is(":checked")) {
            $("#output").text("✅ Checkbox is checked!");
        } else {
            $("#output").text("Checkbox is not checked!");
        }
    });
});

I executed the above example code and added the screenshot below.

How to Check if a Checkbox is Checked Using jQuery

This method works by using the :checked selector with the .is() method, which returns true if the checkbox is checked and false if it’s not.

You can also use this with event handlers:

$(document).ready(function() {
    // Run code when checkbox state changes
    $("#myCheckbox").change(function() {
        if ($(this).is(":checked")) {
            $("#output").text("Checkbox was just checked!");
        } else {
            $("#output").text("Checkbox was just unchecked!");
        }
    });
});

I executed the above example code and added the screenshot below.

Read Call a JavaScript Function When a Checkbox is Checked or Unchecked

Method 2 – Use the jQuery .prop() Method

Since jQuery 1.6, the .prop() method is the recommended way to check boolean properties like the checked state. This method directly accesses the DOM property rather than the attribute.

Here’s how you can use it:

// Check if checkbox is checked using prop()
if($("#myCheckbox").prop("checked")) {
    // Code to execute if checkbox is checked
    console.log("Checkbox is checked!");
} else {
    // Code to execute if checkbox is not checked
    console.log("Checkbox is not checked!");
}

The .prop() method is particularly useful when you’re dealing with dynamically created checkboxes or when you need to check multiple checkboxes.

For example, if you want to count how many checkboxes are checked in a form:

// Count checked checkboxes
let checkedCount = $("input[type='checkbox']:checked").length;
console.log("Number of checked boxes: " + checkedCount);

// Alternative using prop()
let propCheckedCount = $("input[type='checkbox']").filter(function() {
    return $(this).prop("checked");
}).length;
console.log("Number of checked boxes (using prop): " + propCheckedCount);

Check out: Expandable Table with Collapsible Rows Using HTML, CSS, and JavaScript

Method 3 – Use the: checked Selector Directly

Another efficient way is to use the :checked selector directly. This is particularly useful when you need to select all checked checkboxes at once.

// Select all checked checkboxes
let checkedBoxes = $("input[type='checkbox']:checked");

// Do something with all checked checkboxes
checkedBoxes.each(function() {
    console.log("Checkbox with ID " + $(this).attr("id") + " is checked");
});

// Check if at least one checkbox is checked
if(checkedBoxes.length > 0) {
    console.log("At least one checkbox is checked!");
} else {
    console.log("No checkboxes are checked!");
}

This method is particularly effective when working with groups of checkboxes, such as in a shopping cart where users select multiple items.

Read Create a Registration Form with HTML, CSS, and JavaScript

Practical Example: Form Validation

Let’s build a practical example of how to use these methods in a real-world scenario – a newsletter signup form where users must accept terms and conditions:

<form id="newsletterForm">
    <div>
        <input type="email" id="email" placeholder="Your email address" required>
    </div>
    <div>
        <input type="checkbox" id="termsCheckbox">
        <label for="termsCheckbox">I accept the Terms and Conditions</label>
    </div>
    <div>
        <input type="checkbox" id="newsletterCheckbox">
        <label for="newsletterCheckbox">Subscribe to newsletter</label>
    </div>
    <button type="submit">Sign Up</button>
    <p id="validationMessage" style="color: red; display: none;">
        Please accept the Terms and Conditions to continue.
    </p>
</form>

$(document).ready(function() {
    $("#newsletterForm").submit(function(e) {
        // Using .is() method to check if terms checkbox is checked
        if(!$("#termsCheckbox").is(":checked")) {
            e.preventDefault(); // Prevent form submission
            $("#validationMessage").show(); // Show error message
            return false;
        }

        // Using .prop() method to check if newsletter checkbox is checked
        if($("#newsletterCheckbox").prop("checked")) {
            console.log("User wants to receive the newsletter");
        } else {
            console.log("User does not want to receive the newsletter");
        }

        // Form will submit if termsCheckbox is checked
        return true;
    });

    // Hide the error message when user checks the terms checkbox
    $("#termsCheckbox").change(function() {
        if($(this).is(":checked")) {
            $("#validationMessage").hide();
        }
    });
});

In this example, I’ve combined the .is() and .prop() methods to handle different checkbox validations within the same form.

Read Create Interactive HTML Forms with CSS and JavaScript

Handle Groups of Checkboxes

Sometimes you need to work with groups of checkboxes, like in a to-do list or a feature selection form. Here’s how you can handle such scenarios:

// Check all checkboxes in a group
$("#selectAll").click(function() {
    $(".itemCheckbox").prop("checked", $(this).is(":checked"));
});

// React when any checkbox in the group changes
$(".itemCheckbox").change(function() {
    // If all checkboxes are checked, check the "Select All" checkbox too
    $("#selectAll").prop(
        "checked", 
        $(".itemCheckbox:checked").length === $(".itemCheckbox").length
    );
});

// Get values of all checked checkboxes
function getSelectedItems() {
    let selectedItems = [];
    $(".itemCheckbox:checked").each(function() {
        selectedItems.push($(this).val());
    });
    return selectedItems;
}

Both methods work great, the .is() method is intuitive and readable, while the .prop() method is the recommended approach for handling Boolean properties in modern jQuery. The checked Selector gives you powerful flexibility when working with multiple checkboxes.

I hope you found this article helpful. When working with checkboxes in jQuery, remember that the checked state is a property, not an attribute, which is why .prop() is generally preferred over .attr() for these operations. Choosing the right method depends on your specific use case and coding style preferences.