In jQuery, How do we Check if a Checkbox is Checked or Not?

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.

$(element).is(':checked')

Also Read: Check or Uncheck All Checkboxes in a Repeater Control using jQuery .prop() method

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 Markup
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 </head>
<body>
    <input type="checkbox" class="chk" value="chk1" id="chk1" /> Check 1 
    <input type="checkbox" class="chk" value="chk2" id="chk2" checked /> Check 2
    <input type="checkbox" class="chk" value="chk3" id="chk3" checked  /> Check 3
</body>
The Script to Check if Checkbox is checked
<script>
    $(document).ready(function () {
        $('.chk').each(function () {
            var id = $(this).attr('id');
            if ($('#' + id).is(':checked')) {
                alert($('#' + id).val() + ' is checked');
            }
        });
    });
</script>
</html>

Try this Demo

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.

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.

Try this Demo

Well, that’s it. Thanks for reading.

Related Posts:

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 Facebook Google+
comments powered by Disqus

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