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.

$(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>

See 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.

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 Facebook Google+

Related Posts:

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