How to Check whether a Checkbox is Checked in jQuery?

How to Check whether a Checkbox is Checked in jQuery?

Last Updated : 20 Nov, 2024

We can use prop() and is() methods 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.

1. Using prop() Method

This prop() 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.

Syntax

$(selector).prop(parameter)

html

<!DOCTYPE html>
<html lang="en">

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

<body>
    <input type="checkbox" name="radio1" />

    <button style="margin-top:10px" id="but" type="submit">
        Submit
    </button>

    <script>
        $(document).ready(function () {
            $("#but").click(function () {
                if ($("input[type=checkbox]").prop("checked")) {
                    alert("Check box is Checked");
                } else {
                    alert("Check box is Unchecked");
                }
            });
        });
    </script>
</body>

</html>

Output

2. Using jQuery is() Method

In this approach we are using the is() method of jQuery. That methods check if the given element consist of the given situation and returns the output according to it. 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)

html

<!DOCTYPE html>
<html lang="en">

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

<body>
    <input type="checkbox" name="radio1" />
    <button id="but" type="submit">
        Submit
    </button>

    <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>
</body>

</html>

Output

How to Check whether a Checkbox is Checked in jQuery?

S

Sruti Rai

Improve

Article Tags :

Similar Reads

How to Check a Checkbox with jQuery?

We can directly select the element by it's selector and then we can use checked property on that for check and unchecked. 1. By using Checked PropertyIn this method, we will select the element using the element selector and directly use the checked property on the item that is present at the passed

How to hide the checkbox based on value in jQuery?

The checkbox is used to set the content according to the user which he wants to see at the interface. Users also can set multiple choices according to their wishes.Syntax:$('input[name=foo]').attr('checked', false);ApproachIntegrate jQuery in HTML file via CDN Links. Includes the necessary title. Ad

How to find all checkbox inputs using jQuery ?

The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This

How to check if an element is hidden in jQuery?

To check if an element is hidden or not, jQuery :hidden selector can be used. .toggle() function is used to toggle the visibility of an element. Syntax:$(element).is(":hidden");Example:html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Jquery Hid

How to check a radio button with jQuery?

There are two methods by which one can dynamically change the currently selected radio button by changing the checked property of the input type. Method 1: Using prop method: The input can be accessed and its property can be set by using the prop method. This method manipulates the 'checked' propert