DEV Community

Cover image for How To Check Radio Button Based On Selected Value in Javascript/jQuery?
Code And Deploy
Code And Deploy

Posted on • Edited on

3 3

How To Check Radio Button Based On Selected Value in Javascript/jQuery?

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-check-radio-button-based-on-selected-value-in-javascriptjquery

Advanced Laravel SAAS Starter Kit with CRUD Generator

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

In this post, I will share with you an example of how to check the radio button based on selected values using jquery. Maybe you have a task that needs to check the radio button on a selected value using a select box or even a button. To proceed kindly check the example code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How To Check Radio Button Based On Selected Value in jQuery?</title>
</head>
<body>
    <h1>How To Check Radio Button Based On Selected Value in jQuery?</h1>

    <form id="form1">


        <p><b>Membership Type</b></p>
        <select id="membership_type">
            <option value="">Select Membership Type</option>
            <option value="regular">Regular</option>
            <option value="pro">Pro</option>
            <option value="vip">VIP</option>
        </select>

        <p><b>Selected Membership</b></p>
        <input type="radio" value="regular" name="membership" class="membership" disabled="disabled"> Regular
        <input type="radio" value="pro" name="membership" class="membership" disabled="disabled"> Pro
        <input type="radio" value="vip" name="membership" class="membership" disabled="disabled"> VIP

        <br/><br/>

        <button type="button" id="btnSubmit">Submit</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() {

            $("#membership_type").on("change", function() {
                var membership = $(this).val();

                $(".membership[value='"+membership+"']").prop("checked", true);
            });

            // Method #1 - Getting radio selected using class
            $("#btnSubmit").on("click", function() {
                var membership = $(".membership:checked").val();

                alert(membership);
            });
        });
    </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-radio-button-based-on-selected-value-in-javascriptjquery 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 :)

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay