Get Value of Selected Radio Button List Using jQuery

in this tutorial, I will let you know how to find a selected radio list from a group of radio lists with help of javascript. This is a very common problem in the development of web applications.

Radio buttons are commonly used in web forms to allow users to select one option from a set of choices. Retrieving the selected value of a radio button using JavaScript and jQuery is a fundamental task in web development

You can get value using JavaScript as well as jQuery. I will demonstrate for both type options to get the value of the selected radio button list.

Checkout other tutorial of jQuery,

• Add/Remove Selected Element from MultiSelect
• Add/Delete Record Dynamically Using jQuery
• How To Delete Multiple Selected Rows Using Ajax
• How to find selected radio in a radio group list

Simple Example to Get Value of Selected Radio Button List

To implement radio buttons in an HTML form, you need to use the <input> element with the type="radio" attribute. Also, each radio button should have a unique name attribute to group them together. We will define the radio group list using the HTML radio element.

<div id="message" class="alert alert-success" style="display: none;"></div>
<div class="row well">
    <input name="radioGrp" type="radio" value="Milk" /> Milk <input checked="checked" name="radioGrp" type="radio" value="Butter" /> Butter <input name="radioGrp" type="radio" value="Cheese" /> Cheese
    <input name="radioGrp" type="radio" value="Water" /> Water <input name="radioGrp" type="radio" value="Beer" /> Beer <input checked="checked" name="radioGrp" type="radio" value="Wine" /> Wine
    <a class="btn btn-primary pull-right getvalue" type="button">Get Value</a>
</div>

Function to get Value Radio Button Using JavaScript

We’ll querying the document for the checked radio button within the group and accessing its value property.

var selValue = document.querySelector('input[name = "radioGrp"]:checked').value;

We have found all radio button objects using the class selector, I have passed '.getvalue' class name into the jQuery selector. finally, found all the checked radio elements and alert values.

Get The Value Of Selected Radio Button Using jQuery

You can use jQuery selectors and methods to fetch the value of a selected radio button easily. jQuery streamlines this process, making it straightforward to retrieve the radio button value.

Method 1: Using :checked Selector

The :checked selector targets the radio button that is currently selected. By combining this selector with the val() method, we can retrieve the value of the selected radio button:

var selectedValue = $("input[name='gender']:checked").val();

Method 2: Using .change() Event Handler

The .change() event handler allows you to capture changes to the radio button selection in real-time. By attaching this event handler to the radio button elements, you can retrieve the value whenever the selection changes as like below:

// Using .change() event handler to get the value of selected radio button
$("input[name='gender']").change(function() {
  var selectedValue = $("input[name='gender']:checked").val();
  console.log("Selected value: " + selectedValue);
});

Method 3: Using Group Class

Let’s bind a click event handler to elements with the class "getvalue". When clicked, it displays an element with the ID “message” and sets its text content to the value of the checked radio button within the group named "radioGrp".

$(document).ready(function(){
  jQuery('.getvalue').on('click', function(e) {
 $('#message').show().text($("input:radio[name=radioGrp]:checked").val());
  });
});

Here we have used the same iteration method to get all radio elements but, The selected radio button value will get using jQuery text method.

Demo and Download source code

I hope it will help you.