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 :)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay