How to check a radio button with 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 a radio button with 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

How to get all checked values of checkbox in JavaScript ?

A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v

How to emit an event when a checkbox is clicked using Socket.IO?

Problem Statement: Task is to perform an action by emitting an event from the backend whenever a particular checkbox is clicked in the frontend. This needs to be done using Socket.IO and Node.js Prerequisite: Node.js : It is an open-source JavaScript Back-End technology. Express.js : It is a node.js

How to change the checkbox value using jQuery ?

The Checkboxes are used to let a user select one or more options for a limited number of choices. The :checkbox selector selects input elements with type checkbox.Syntax: $('#textboxID').val($("#checkboxID").is(':checked')); In the above syntax, basically the return value of the checked or unchecked

JavaScript- Make a Textfield Required if a Checkbox is Checked

To make a text field required based on whether a checkbox is checked, you can use JavaScript to dynamically toggle the required attribute of the text field. This ensures users are prompted to fill out the field only when the checkbox is checked.1. Using required Attribute with change EventThis metho

How to set checkbox checked on button click in AngularJS?

In this article, we will see how to set checkboxes checked with the click of a button in AngularJS. Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkbo