How to Get Value of Selected Radio Button with jQuery
While working with radio buttons, seldom we have to retrieve the selected radio button value with a click or change javascript events.
However, some of you won’t consider a hectic task. Still, it might become a headache for some beginners to get the selected value of a radio button.
Get Value of Selected Radio Button Examples
I am going to take a holistic approach to make you understand the entire concept.
I will lay the foundation for this tutorial by defining the 5 nakshatra names with radio buttons whose selected value we can get using radio buttons with jQuery.
Here are the three examples for retrieving the selected values of radio buttons using id or class.
We will bind these examples with the jQuery click event and :checked CSS pseudo-class selector to get selected radio button values.
Demo: 1
From now on, you won’t have to face any problem acquiring the selected value of a radio button. You can grab the example below, just like that.
<!DOCTYPE html>
<html>
<head>
<title>Get value of selected radio button with Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="astro" class="astro" value="aswini"> Aswini
<input type="radio" name="astro" class="astro" value="bharani"> Bharani
<input type="radio" name="astro" class="astro" value="krithika"> Krithika
<input type="radio" name="astro" class="astro" value="rohini"> Rohini
<input type="radio" name="astro" class="astro" value="ashlesha"> Ashlesha
<button>Get Value</button>
<script type="text/javascript">
$("button").click(function(){
var val = $("input[type='radio']:checked").val();
alert(val);
});
</script>
</body>
</html>Demo: 2
Another example propels the idea forward and heralds how to get the selected value with class.
<!DOCTYPE html>
<html>
<head>
<title>Get value of selected radio button with Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="astro" class="astro" value="aswini"> Aswini
<input type="radio" name="astro" class="astro" value="bharani"> Bharani
<input type="radio" name="astro" class="astro" value="krithika"> Krithika
<input type="radio" name="astro" class="astro" value="rohini"> Rohini
<input type="radio" name="astro" class="astro" value="ashlesha"> Ashlesha
<button>Get Value</button>
<script type="text/javascript">
$("button").click(function(){
var val = $(".astro:checked").val();
alert(val);
});
</script>
</body>
</html>Demo: 3
In the last example, we will try to play with the change event to get the selected values.
<!DOCTYPE html>
<html>
<head>
<title>Get value of selected radio button with Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="astro" class="astro" value="aswini"> Aswini
<input type="radio" name="astro" class="astro" value="bharani"> Bharani
<input type="radio" name="astro" class="astro" value="krithika"> Krithika
<input type="radio" name="astro" class="astro" value="rohini"> Rohini
<input type="radio" name="astro" class="astro" value="ashlesha"> Ashlesha
<script type="text/javascript">
$(".astro").change(function(){
var val = $(".astro:checked").val();
alert(val);
});
</script>
</body>
</html>The Bottom Line
So this was it. In this tutorial, we have learned how to know which value of a radio button is selected. As promised, we have taken the holistic approach, which ideally the best for novice developers.
I hope you will like this tutorial and share it with others.
