get radio button value jquery

Introduction

Welcome Ninja!! We have come up with yet another article on JQuery. Let’s start discussing what JQuery is. This is an essential tool used in designing the front end. JQuery is used to simplify, shorten and beautify the codes written in Javascript. JQuery also plays an important role in DOM manipulation. DOM manipulation includes changing HTML elements, CSS elements, zooming in elements, zooming out elements, animating elements, and many more.

Now let’s understand what a radio button is. Radio buttons are generally used to take input from users. By using this, we can select one option out of multiple options.

So, now let’s start understanding how to get radio button value jquery.

Get Radio Button Value jQuery

For beginners, it becomes difficult to get the radio button value jQuery. Let’s use jquery to list the days of the week.

To extract the value of the radio button, just use:

$('input[type="typeAssigned"]:checked').val();
or
$('input[name="nameGivenToTheRadiobutton"]:checked').val();


<!DOCTYPE html>
<html>
<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" value="monday"> Monday
    <input type="radio" value="tuesday"> Tuesday
    <input type="radio" value="wednesday"> Wednesday
    <input type="radio" value="thursday"> Thursday
    <input type="radio" value="friday"> Friday
    <input type="radio" value="saturday"> Saturday
    <input type="radio" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $("input[type='radio']:checked").val();
            alert(val);
        });
    </script>

</body>
</html>

Here, the head tag is used to display the title. In the body, we have listed the seven days of the week, and under the script tag, we have written the code to extract the value of the radio button.

We can also get the radio button value jquery using id.



<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" id="weekday" value="monday"> Monday
    <input type="radio" id="weekday" value="tuesday"> Tuesday
    <input type="radio" id="weekday" value="wednesday"> Wednesday
    <input type="radio" id="weekday" value="thursday"> Thursday
    <input type="radio" id="weekday" value="friday"> Friday
    <input type="radio" id="weekday" value="saturday"> Saturday
    <input type="radio" id="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $("#weekday:checked").val();
            alert(val);
        });
    </script>

</body>

</html>

You can also try this code with Online Javascript Compiler

Run Code

We can also get the radio button value jquery using class.

<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" class="weekday" value="monday"> Monday
    <input type="radio" class="weekday" value="tuesday"> Tuesday
    <input type="radio" class="weekday" value="wednesday"> Wednesday
    <input type="radio" class="weekday" value="thursday"> Thursday
    <input type="radio" class="weekday" value="friday"> Friday
    <input type="radio" class="weekday" value="saturday"> Saturday
    <input type="radio" class="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $(".weekday:checked").val();
            alert(val);
        });
    </script>

</body>

</html>

You can also try this code with Online Javascript Compiler

Run Code

We can also get the radio button value jquery using change event.

<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" class="weekday" value="monday"> Monday
    <input type="radio" class="weekday" value="tuesday"> Tuesday
    <input type="radio" class="weekday" value="wednesday"> Wednesday
    <input type="radio" class="weekday" value="thursday"> Thursday
    <input type="radio" class="weekday" value="friday"> Friday
    <input type="radio" class="weekday" value="saturday"> Saturday
    <input type="radio" class="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $(".weekday").change(function() {
            var val = $(".weekday:checked").val();
            alert(val);
        });
    </script>
</body>
</html>

You can also try this code with Online Javascript Compiler

Run Code

Try and compile by yourself with the help of online javascript compiler for better understanding.

It's time to discuss some FAQs related to the Get Radio Button Value JQuery.

Frequently Asked Questions

How to get radio button value in jQuery?

To get the selected radio button value in jQuery, use: $('input[name="radioName"]:checked').val();

How to fetch value of radio button?

Use jQuery to fetch the value of the selected radio button: $('input[name="radioName"]:checked').val();

How to get value of button in jQuery?

To get the value of a button in jQuery, use: $('button').val(); or $(this).val(); within an event handler.

Conclusion

In this blog, we explored how to easily retrieve the value of a selected radio button using jQuery. By using the :checked selector, we can efficiently target the selected radio button and fetch its value with the .val() method. This simple yet powerful approach can be applied in various scenarios, from form submissions to dynamic content manipulation.