You can get the selected radio button value in jQuery using the :checked selector.

Example using a button click event

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Radio Button Value in jQuery</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="radio" name="gender" value="Other"> Other

<button id="getGenderValue">Get Value</button>

<script>
	$(document).ready(function(){
	    $('#getGenderValue').click(function(){
	        var selectedGenderValue = $("input[name='gender']:checked").val();
    		console.log(selectedGenderValue);
	    });
	});
</script>
</body>
</html>

Description:

  • input[name='gender'] selects all radio buttons that belong to the gender group.
  • :checked identifies the radio button that is currently selected.
  • .val() retrieves the value of the selected radio button.
  • If no radio button is selected, the returned value will be undefined.

For example, if Female is selected, the code will return "Female".

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Radio Button Value in jQuery</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" class="gender" value="Male"> Male
<input type="radio" name="gender" class="gender" value="Female"> Female
<input type="radio" name="gender" class="gender" value="Other"> Other

<button id="selectedGenderValueByClass">Get Value</button>

<script>
	$(document).ready(function(){
	    $('#selectedGenderValueByClass').click(function(){
	        var selectedGenderValueByClass = $(".gender:checked").val();
    		console.log(selectedGenderValueByClass);
	    });
	});
</script>
</body>
</html>

Description:

  • $(".gender:checked") selects the radio button with the gender class that is currently checked (selected).
  • .val() retrieves the value of the selected radio button.

For example, if the selected radio button has the value "Female", the code will return "Female".

Example using a radio change event

Here’s a simple jQuery example that runs code whenever a radio button selection changes:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Radio Button Value in jQuery</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" class="gender" value="Male"> Male
<input type="radio" name="gender" class="gender" value="Female"> Female
<input type="radio" name="gender" class="gender" value="Other"> Other

<script>
	$(document).ready(function(){
	   	// Method 1: using class selector
	    $(".gender").change(function(){
	        var selValue = $("input[type='radio']:checked").val();
	        console.log(selValue);
	    });

		// Method 2: using input tag
		$("input[name='gender']").on("change", function () {
			var selectedValue = $("input[name='gender']:checked").val();
			console.log("Selected gender:", selectedValue);
		});
	});
</script>
</body>
</html>

In this example, the change event is triggered whenever the user selects a different radio button. The currently selected value is then retrieved and displayed in the console.