Open In App

How to check whether a checkbox is checked in jQuery?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article we are going to learn how to check whether a checkbox is checked in jQuery,A checkbox is a user interface element that allows users to select or deselect an option. we have two basic approaches prop() and is() methods are the two ways by which we can check whether a checkbox is checked in jQuery or not.

these are our basic approaches

Approach 1: Using prop():

This method provides a simple way to track down the status of checkboxes. It works well in every condition because every checkbox has checked property which specifies its checked or unchecked status.

Using the jQuery prop() Method:

Syntax:

$(selector).prop(parameter) 

Parameter:

Here parameter is the present status of the Checkbox.

Example : In this example, we are using the above-explained approach.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("#but").click(function () {
                if ($("input[type=checkbox]").prop(
                    ":checked")) {
                    alert("Check box in Checked");
                } else {
                    alert("Check box is Unchecked");
                }
            });
        });
    </script>
</head>
 
<body>
    <center>
        <div style="width: 80px;
        height: 80px;
        padding: 10px;
        border: 2px solid green;">
 
            <input type="checkbox"
                   name="radio1" checked />
 
 
            <br>
 
            <button style="margin-top:10px"
                    id="but"
                    type="submit">
                Submit
            </button>
        </div>
    </center>
 
</body>
 
</html>


Output:

jQuery-97

Approach 2:Using the jQuery is() Method :

This method is also very simple and easy to use. By using this we can easily find whether a checked box is checked or not.

Syntax :

$(selector).is(parameter) 

Parameter: Here parameter is the present status of the Checkbox.

Example: In this example, we are using the above-explained approach.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 80px;
            height: 80px;
            padding: 10px;
            border: 2px solid green;
        }
 
        button {
            margin-top: 10px;
        }
    </style>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("#but").click(function () {
                if ($("input[type=checkbox]").is(
                    ":checked")) {
                    alert("Check box in Checked");
                } else {
                    alert("Check box is Unchecked");
                }
            });
        });
    </script>
 
</head>
 
<body>
    <center>
        <div>
            <input type="checkbox"
                   name="radio1" checked />
            <br>
            <button id="but"
                    type="submit">
                Submit
            </button>
        </div>
    </center>
 
</body>
 
</html>


Output:

jQuery-98

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 12 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads