How to Check If Checkbox is Checked or Not in jQuery?

To check if the checkbox is checked or not using jQuery, you can use the two ways. There are jQuery methods props() and is() which we can use to check the status of the checkbox element.

The prop() method is used to set or return the values of selected elements, but in our case, we need to return the value. The prop() method should only be used to get the value of the property from DOM.

Syntax

$(selector).prop(property)

The is() method is used to match the value of the selector element. It returns true if there is a matching element found, and false if not. So in our case for the checkbox checked, we will use the :checked as a selector element.

Syntax

$(selector).is(selectorElement)

Let’s see examples of using prop() and is() methods to check whether a checkbox is checked or not.

Table of Contents

1 Check with prop() Method

2 Check with is() Method

3 Check if Checkbox not Checked

Check with prop() Method

Let’s take an example of the prop() method to check the checkbox whether checked or not by getting the value of the property.

Example 1

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Checkbox Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    </head>
    <body>

        <h2>jQuery Checkbox with prop()</h2>

        <input type="checkbox" class="example1" value="BMW" id="bmw-ex1" /> BMW
        <input type="checkbox" class="example1" value="Range Rover" id="range-rover-ex1" /> Range Rover
        <input type="checkbox" class="example1" value="Mercedes" id="mercedes-ex1"  /> Mercedes

        <button id="example1">Click</button>

        <script>
            $(document).ready(function () {
                $('#example1').click(function () {
                    $('.example1').each(function () {
                        var id = $(this).attr('id');
                        if($('#' + id).prop('checked')) {
                            alert($('#' + id).val() + ' is checked');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

In this above code, we take three checkboxes of different cars and one submit button to check the value of those checkboxes which is checked.

To get the value of checked checkboxes, we made a jquery script for the click event. It will check each checkbox and if any are found with the checked status it will alert the value of it.

Example 2

In the 2nd example, you can also get the value of checked checkboxes when the user clicks on specific. Simply you just need to add the click event on the checkbox element.

<input type="checkbox" class="example2" value="BMW" id="bmw-ex2" /> BMW
<input type="checkbox" class="example2" value="Range Rover" id="range-rover-ex2" /> Range Rover
<input type="checkbox" class="example2" value="Mercedes" id="mercedes-ex2"  /> Mercedes

<script>
    $('.example2').click(function () {
        if($(this).prop('checked')) {
          alert($(this).val() + ' is checked');
        }
    });
</script>

Check with is() Method

You can also use the is() jQuery method to check the status of the checkbox and whether it is checked or not. You have to pass the :checked selector within the is() method.

Let’s now see the example of jQuery is() method with selector element (:checked).

Example 3

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Checkbox Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    </head>
    <body>

        <h2>jQuery Checkbox with is()</h2>

        <input type="checkbox" class="example3" value="BMW" id="bmw-ex3" /> BMW
        <input type="checkbox" class="example3" value="Range Rover" id="range-rover-ex3" /> Range Rover
        <input type="checkbox" class="example3" value="Mercedes" id="mercedes-ex3"  /> Mercedes

        <button id="example3">Click</button>

        <script>
            $(document).ready(function () {
                $('#example3').click(function () {
                    $('.example3').each(function () {
                        var id = $(this).attr('id');
                        if($('#' + id).is(':checked')) {
                            alert($('#' + id).val() + ' is checked');
                        }
                    });
                });
            });
        </script>
    </body>
</html>

In the above code, we take the checkboxes and one button to trigger the event. Then we made the click event on the button to check each checkbox to check the status using the is() method with :checked selector. If any match is found it will alert the value of it.

Same as the prop() method, you can also make a click event on them. When the user checked any specific checkbox will get the value of it.

Example 4

In the 2nd example, you can also get the value of checked checkboxes when the user clicks on specific. Simply you just need to add the click event on the checkbox element.

<input type="checkbox" class="example4" value="BMW" id="bmw-ex4" /> BMW
<input type="checkbox" class="example4" value="Range Rover" id="range-rover-ex4" /> Range Rover
<input type="checkbox" class="example4" value="Mercedes" id="mercedes-ex4"  /> Mercedes

<script>
    $('.example4').click(function () {
        if($(this).is(':checked')) {
          alert($(this).val() + ' is checked');
        }
    });
</script>

Check if Checkbox not Checked

If you want to know if the checkbox is not checked then you can use the :not() selector method with :checked selector to target those that are not checked yet.

Example 5

<input type="checkbox" class="example5" value="BMW" id="bmw-ex5" /> BMW
<input type="checkbox" class="example5" value="Range Rover" id="range-rover-ex5" /> Range Rover
<input type="checkbox" class="example5" value="Mercedes" id="mercedes-ex5"  /> Mercedes

<button id="example5">Click</button>

<script>
    // Example 5
    $('#example5').click(function () {
        $('.example5').each(function () {
            if($(this).is(':not(:checked)')) {
                alert($(this).val() + ' is not checked');
            }
        });
    });
</script>

See all the above examples of jQuery prop(), is(), :not, and :checked methods here in the codepen. Follow on codepen for more examples.

See the Pen
jQuery prop(), is() Method Checkbox Examples by Aman Mehra (@amanmehra)
on CodePen.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to Check If Checkbox is Checked or Not in jQuery?

Check with prop() Method

Example 1

Example 2

Check with is() Method

Example 3

Example 4

Check if Checkbox not Checked

Example 5

About Aman Mehra

Leave a Comment Cancel reply

Check with prop() Method

Example 1

Example 2

Check with is() Method

Example 3

Example 4

Check if Checkbox not Checked

Example 5

Related Posts

How to Check if Element Exists Using jQuery?

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

About Aman Mehra

Leave a Comment Cancel reply