2 simple ways to Check if checkbox is checked or not in jQuery

There are few simple ways in jQuery to check if a checkbox is checked or not. You can use the .prop() method or the :checked selector to check the status of a checkbox. I’ll also explain how to check whether a checkbox is not checked.

Let’s see them in action.

Check if checkbox is checked using .prop() method

You can use the .prop() method to get or set the properties of a checkbox. In-fact, you can use this method on any control on your web page. It is simple to use.

The method takes a parameter. See the syntax.

$(selector).prop(property)

Here’s an example.

I have group of check boxes. I’ll iterate through each checkbox and check the statue of each checkbox using the .prop() method.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <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

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

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

Try it

Check if checkbox is “not” checked

To find out if a checkbox is not checked, you can do this.

if (! $('#' + id).prop('checked')) {
    alert($('#' + id).val() + ' is checked');
}

There’s an exclamation mark ( ! ) inside the if() statement, followed by the .prop() method. It will return the checkbox, which is not checked in the group.

Check if checkbox is checked using “:checked” Selector

The :checked sector can be used to check the status of a checked box. You can use this selector within jQuery .is() method.

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')

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

Here's an example.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <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

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

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

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 want to 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

← PreviousNext →