How to Check if Checkbox is Checked or Not using jQuery

Using jQuery is() method, along with the :checked and :not() selector, you can easily check the status of a checkbox or a group of checkboxes on a web page. With the “status”, I mean if any checkbox or multiple checkboxes are checked or not.

The jQuery is() method checks the selected element or a group of elements against a given selector. The method returns true or false, based on a match.

Here’s how we can use the is() method using a selector, in our case :checked.


Also Read: See How to use jQuery .prop() Method to Check or Uncheck All Checkboxes in a Repeater Control

The :checked selector works on checkboxes, radio buttons and select elements.

Note: Be careful when defining a selector. There must not be any space between the “:” (colon) and the selector (checked, in this case).

Now let’s see an example and find out how you can apply the is() method with the :checked selector to check if a checkbox or multiple checkboxes are checked.

The Script to Check if Checkbox is checked
<!DOCTYPE html>
    <script src=""></script>
    <p>Check of uncheck the below checkboxes and 
        click the button to check which checkbox is checked.</p>

    <input type="checkbox" class="chk" value="chk1" id="chk1" /> Check 1 <br />
    <input type="checkbox" class="chk" value="chk2" id="chk2" checked /> Check 2 <br />
    <input type="checkbox" class="chk" value="chk3" id="chk3" checked  /> Check 3

    <p><input type="button" id="bt" value="Click it" /></p>

    $(document).ready(function () {
        $('#bt').click(function () {
            $('.chk').each(function () {
                var id = $(this).attr('id');
                if ($('#' + id).is(':checked')) {
                    alert($('#' + id).val() + ' is checked');
Try it

Since I have multiple checkboxes on my web page, I have assigned unique ids to each checkbox. Along with it, I have assigned a class named chk to each checkbox.

I am using the class name to loop through each checkbox on my web page. Next, I’ll extract the ids from the check boxes. Using the unique with the is() method and :checked, I am checking which checkboxes are checked.

See this demo

If you have a single checkbox, you don’t need the looping function. You can straight away check if the checkbox is checked or not.

if ($('#chk2').is(':checked')) {
    alert($('#chk2').val() + ' is checked');

Check if Checkbox is “not” Checked

In the above example (see the markup), I have 3 checkboxes with 2 checked and 1 unchecked. I now wished check which checkbox in the group is not checked.

You can use the :not() selector along with the :checked selector.

$('.chk').each(function () {
    var id = $(this).attr('id');
    if ($('#' + id).is(':not(:checked)')) {
        alert($('#' + id).val() + ' is not checked');

See how I have defined the :checked selector inside the :not() selector.

See this demo

Well, that’s it. Thanks for reading.

Previous - How to Get the Number from an Element’s ID using jQuery replace() Method ExampleNext - Dynamically Add Textbox and Button control using jQuery and Save Data to SQL Server Table using a Web Method

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!