;

How To Check if Radio Button is Checked or Not Using Jquery or Javascript


Tutorialsrack 03/07/2020 Jquery Javascript

In this article, you will learn how to check if the radio button is checked or not using Jquery or javascript. There are various ways to check if the radio button is checked or not. In this article, we used the prop() and is() function along with the :checked selector to check if the radio button is checked or not using jquery or Javascript. 

Example 1: Using prop() function

The prop() function sets or returns the properties and values of the selected elements. This function gets the value of a property for the first element in the set of matched elements or sets one or more properties for every matched element. In the case of a radio button, this function works well in every condition because every radio button has checked property which specifies the radio button status whether it is Checked or Unchecked.

Here is the source code of the program to check if the radio button is checked or not by using the prop() function in Jquery.

Example 1: Using prop() function
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Check if Radio Button is Checked or Not using Jquery</title>

        <!-- Include Jquery Library -->
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>

    <body>
        <input type="radio" name="radio" value="radio" />Radio Button
        <br />
        <button type="button" id="btn_submit">Click Here</button>

        <script>
            // Script to Check if Radio Button is Checked or Not
            // On Button Clicked
            $("#btn_submit").on("click", function (e) {
                if ($('input[type="radio"]').prop("checked")) {
                    alert("Radio Button is Checked");
                } else {
                    alert("Radio Button is Unchecked");
                }
            });
        </script>
    </body>
</html>

Example 2: Using is() Function 

The is() function checks if one of the selected elements matches the selectorElement. This function checks the currently matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments.

Here is the source code of the program to check if the Radio Button is checked or not by using the is() function in Jquery.

Example 2: Using is() Function
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Check if Radio Button is Checked or Not using Jquery</title>
 
        <!-- Include Jquery Library -->
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
 
    <body>
        <input type="radio" name="radio" value="radio" /> Radio Button
        <br />
        <button type="button" id="btn_submit">Click Here</button>
 
        <script>
            // Script to Check if Radio Button is Checked or Not
            // On Button Clicked
            $("#btn_submit").on("click", function (e) {
                if ($('input[type="radio"]').is(":checked")) {
                    alert("Radio Button is Checked");
                } else {
                    alert("Radio Button is Unchecked");
                }
            });
        </script>
    </body>
</html>

Example 3: Using :checked Selector and Length

In this example, we used the :checked selector and length, if the length is greater than zero if the Radio Button is checked.

Here is the source code of the program to check if the Radio Button is checked or not by using the :checked and length in Jquery.

Example 3: Using :checked Selector and Length
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Check if Radio Button is Checked or Not using Jquery</title>
 
        <!-- Include Jquery Library -->
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
 
    <body>
        <input type="radio" name="radio" value="radio" /> Radio Button
        <br />
        <button type="button" id="btn_submit">Click Here</button>
 
        <script>
            // Script to Check if Radio Button is Checked or Not
            // On Button Clicked
            $("#btn_submit").on("click", function (e) {
                if ($("input[type=radio]:checked").length > 0) {
                    alert("Radio Button is Checked");
                } else {
                    alert("Radio Button is Unchecked");
                }
            });
        </script>
    </body>
</html>

Example 4: Using document.getElementsById() function of Javascript

In this example, we used the document.getElementsById() function to check if the radio button is checked or not using javascript.

Here is the source code of the program to check if the radio button is checked or not by using the document.getElementsById() function in Javascript.

Example 4: Using document.getElementsById() function of Javascript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Check if Radio Button is Checked or Not using Jquery</title>
 
        <!-- Include Jquery Library -->
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
 
    <body>
        <input type="radio" name="radio" id="radio" value="radio" /> Radio Button
        <br />
        <button type="button" id="btn_submit">Click Here</button>
 
        <script>
            // Script to Check if Radio Button is Checked or Not
            // On Button Clicked
            $("#btn_submit").click(function () {
                if (document.getElementById("radio").checked) {
                    alert("Radio Button is Checked");
                } else {
                    alert("Radio Button is Unchecked");
                }
            });
        </script>
    </body>
</html>

I hope this article will help you to understand how to check if the radio button is checked or not using Jquery or javascript.

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!


Related Posts



Comments

Recent Posts
Tags