Get Selected Radio button value using jQuery

How to get selected radio button value using jQuery?

To get the value of selected radio button the easiest way is to use jQuery.

HTML :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<h3>Radio button</h3>
	<form id="myForm">
  		<input type="radio" name="radioName" value="First" /> First <br />
  		<input type="radio" name="radioName" value="Second" /> Second <br />
  		<input type="radio" name="radioName" value="Third" /> Third <br />
  		<br/>
  		<div id="result"></div>
	</form>
</body>
</html>

Here we have to include jquery.js because we are doing this problem with jquery.

jQuery.js : https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

  1. Code some radio buttons with same name. Specify the value for each radio button.
  2. Div with id result is to show the final result.

jQuery : Method – 1

<script type="text/javascript">
	$('#myForm input').on('change', function() 
	{
	   $('#result').html('<strong>Selected radio button :</strong> '+ $('input[name=radioName]:checked').val()); 
	});
</script>

In jQuery either we can do the form input change or directly radio button change. Both are done by change event.

The above example is done by form input change,

  1. $(‘input[name=radioName]:checked’).val() will return the selected radiobutton’s value.
  2. Append the result to $(‘#result’).html().

Method – 2

<script type="text/javascript">
     $('input[name=radioName]').on('change', function() 
     {
         $('#result').html('<strong>Selected radio button :</strong> '+ 
           $(this).val()); 
     });
</script>

By this method we’ll directly call change event for radio button. To get the result you have to call $(this).val() only.

For other jQuery solutions please visit jQuery

Related Posts

JQuery Remove duplicate elements

JQuery Remove duplicate elements – Easy method

JQuery Remove duplicate elements: It’s very easy to remove duplicate elements from a list using jQuery. Demo: Let’s say we have below list: Here multiple duplicate values…

jQuery sorting by price

jQuery sorting by price – Easy method(jQuery 3.x)

In this example let’s check how to do jQuery sorting by price in an easy way. Demo: Its a very important feature in ecommerce platforms to do…

sum of datatable column

Calculate sum of Datatable columns and display in footer – Easy method with sum()

In this example let’s check how to calculate sum of datatable columns (multiple columns) and display the same in footer. In some cases we may need to…

jquery datatable

jQuery Datatable – Easy Steps

Here is simple example to create jQuery Datatable. jQuery Datatable organizes data in grid like format of rows and columns. It is very organized, interactive and intutive….

jquery toggle

jQuery Toggle() Method

How to do jquery Toggle() method to show/hide onclick The jQuery toggle() method is used to toggle between the hide() and show() method. It shows the hidden…

jquery validation

jQuery validation for confirm password

How to validate password and confirm password using jQuery validation plugin ? Earlier we have discussed how to validate a form validation with jQuery validate plugin, in…

Leave a Reply

Your email address will not be published. Required fields are marked *