jQuery – Get Selected Radio Button value

  • by

The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve only the selected options of select elements, use the :selected selector. The :checked selector in jQuery is used to retrieve the selected option from the radio button group. In this example we will first create a radio button option group of different roles and retrieve the selected option from the group.



This will return the selected option from the radio group. For example let’s say the group name is jobRoles so the code would be



<!DOCTYPE html>
<meta charset="utf-8" />
<title>JQuery - Get value</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<body style="padding:10px">

<h2>Select your role:</h2>

<input type="radio" name="role" value="SCRUM Master">SCRUM Master<br/><br />
<input type="radio" name="role" value="Database Administrator">Database Administrator<br /><br />
<input type="radio" name="role" value="Software Developer">Software Developer<br /><br />
<input type="radio" name="role" value="QA Tester">QA Tester<br /><br />
<input type="radio" name="role" value="Product Manager">Product Manager<br /><br />

<label id="lblSelectedOption">You have selected no roles yet</label><br/><br />
<input type="button" id="btnSubmit" value="Submit">

$(document).ready(function () {
$('#btnSubmit').click(() => {



function watchSelectedValue()
$("input").on("click", function () {

function getSelectedValue()

var selectedOption = $('input[name="role"]:checked').val();
if (selectedOption) {
$('#lblSelectedOption').html("You have selected " + selectedOption)
return selectedOption;
return "No option selected"




Also see:
jQuery: How to Get, Set and Remove Attribute

HTML showing Notifications using jQuery

jQuery DataTable custom dark theme

Custom CSS designs for jQuery DataTable.