DEV Community

Cover image for How to Check if Radio Button is Checked or Selected in jQuery?
Code And Deploy
Code And Deploy

Posted on • Edited on

7 1

How to Check if Radio Button is Checked or Selected in jQuery?

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

In this post, we will talk about how to check if your radio button is already checked using jquery. This is usually applicable if you're doing forms with additional checking. This is helpful determine what radio button is checked before submitting it to your server-side. I will share 3 methods for you to select and apply that are suitable to your needs.

Method #1

Check using if statement with :checked selector and val() to determine if checked



// Method #1 - check using if statement with :checked selector and val() to determine if checked
$("#btnSubmit1").on("click", function() {
    if($(".status1:checked").val()) {
        alert('checked')
    } else {
        alert('not checked.')
    }
});


Enter fullscreen mode Exit fullscreen mode

Method #2

Check using .is() function and :checked selector to determine if the radio button is checked



// Method #2 - check using is() function to determine if the radio button is checked
$("#btnSubmit2").on("click", function() {
    if($(".status2").is(':checked')) {
        alert('checked')
    } else {
        alert('not checked.')
    }
});


Enter fullscreen mode Exit fullscreen mode

Method #3

Loop the radio button elements with :checked selector. Useful if you have multiple selected radio button



// Method #3 - loop the radio button elements with :checked selector.
// useful if you have multiple selected radio button
$("#btnSubmit3").on("click", function() {
    $("[type=\"radio\"]:checked").each(function() {
        alert('checked')
    });
});


Enter fullscreen mode Exit fullscreen mode

Now you have the idea of how to check the radio button selected just choose what fits to you. Now I will share the complete source code of this post.



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How to Check if Radio Button is Checked or Selected in jQuery?</title>
</head>
<body>
    <h1>How to Check if Radio Button is Checked or Selected in jQuery?</h1>

    <h2>Method #1 - check using if statement with :checked selector and val() to determine if checked</h2>
    <form id="form1">
        <label>Click here
            <input type="radio" value="1" name="status1" class="status1" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit1">Check Status</button>
    </form>

    <br/><br/><br/><br/>

    <h2>Method #2 - check using is() function to determine if the radio button is checked</h2>
    <form id="form2">
        <label>Click here
            <input type="radio" value="regular" name="status2" class="status2" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit2">Check Status</button>
    </form>

    <br/><br/><br/><br/>

    <h2>Method #3 - loop the radio button elements with :checked selector</h2>
    <p>useful if you have multiple selected radio button</p>
    <form id="form3">
        <label>Click here
            <input type="radio" value="regular" name="status3" class="status3" required="required">
        </label>
        <br/><br/>
        <button type="button" id="btnSubmit3">Check Status</button>
    </form>

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

    <script type="text/javascript">
        $(document).ready(function() {
            // Method #1 - check using if statement with :checked selector and val() to determine if checked
            $("#btnSubmit1").on("click", function() {
                if($(".status1:checked").val()) {
                    alert('checked')
                } else {
                    alert('not checked.')
                }
            });


            // Method #2 - check using is() function to determine if the radio button is checked.
            $("#btnSubmit2").on("click", function() {
                if($(".status2").is(':checked')) {
                    alert('checked')
                } else {
                    alert('not checked.')
                }
            });

            // Method #3 - loop the radio button elements with :checked selector.
            // useful if you have multiple selected radio button.
            $("#btnSubmit3").on("click", function() {
                $("[type=\"radio\"]:checked").each(function() {
                    alert('checked')
                });
            });
        });
    </script>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-check-if-radio-button-is-checked-or-selected-in-jquery if you want to download this code.

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Happy coding :)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay