In this tutorial we are going to see how to get selected or checked radio button value in jQuery. Here we will use :checked selector with val() to get selected radio button value from a group of radio buttons. It is very easy to get selected value using jquery. jQuery selectors are used to select HTML elements and perform actions on it. The following example will help you to understand how to get selected radio button value in jQuery.
To get the selected radio button value we use
var selValue = $("input[name='tutorial']:checked").val();
jQuery :checked selector is used to retrieve selected radio button value. We are going to get radio button value by on change event.
Get the selected radio button value onchange
HTML Code:
<p> <label><input type="radio" name="tutorial" value="PHP">PHP</label> <label><input type="radio" name="tutorial" value="MySQL">MySQL</label> <label><input type="radio" name="tutorial" value="jQuery">jQuery</label> <label><input type="radio" name="tutorial" value="AJAX">AJAX</label> <label><input type="radio" name="tutorial" value="JSON">JSON</label> </p>
jQuery Code:
$(document).ready(function () {
$("input[name='tutorial']").on('change', function () {
var selValue = $("input[name='tutorial']:checked").val();
if(selValue)
{
alert("You have selected : "+ selValue);
}
});
});
Complete Code:
<!DOCTYPE html>
<!--
Website : phpcluster.com
Tutorial : How to Get Selected Radio Button Value in jQuery
Author : Vikash Kumar Singh
-->
<html>
<head>
<title>How to Get Selected Radio Button Value in jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[name='tutorial']").on('change', function () {
var selValue = $("input[name='tutorial']:checked").val();
if(selValue)
{
alert("You have selected : "+ selValue);
}
});
});
</script>
</head>
<body>
<div>
<h1>Get Selected Radio Button Value in jQuery</h1>
<h5> Select tutorial</h5>
<p>
<label><input type="radio" name="tutorial" value="PHP">PHP</label>
<label><input type="radio" name="tutorial" value="MySQL">MySQL</label>
<label><input type="radio" name="tutorial" value="jQuery">jQuery</label>
<label><input type="radio" name="tutorial" value="AJAX">AJAX</label>
<label><input type="radio" name="tutorial" value="JSON">JSON</label>
</p>
</div>
</body>
</html>
How to Create Dropdown With Search Box Using jQuery
Get the selected radio button value on button click
In this example we are going to get selected radio button value on click of a button.
HTML Code:
<p> <label><input type="radio" name="db" value="MySQL">MySQL</label> <label><input type="radio" name="db" value="ORACLE">ORACLE</label> <label><input type="radio" name="db" value="SQLite">SQLite</label> <label><input type="radio" name="db" value="MS Access">MS Access</label> </p> <p> <input type="button" value="Get Value"></p>
jQuery Code:
$(document).ready(function () {
$("input[type='button']").on('click', function () {
var selValue = $("input[name='db']:checked").val();
if (selValue)
{
alert("You have selected : " + selValue);
}
});
});
Complete Code:
<!DOCTYPE html>
<!--
Website : phpcluster.com
Tutorial : Get Selected Radio Button Value on Button Click in jQuery
Author : Vikash Kumar Singh
-->
<html>
<head>
<title>Get Selected Radio Button Value on Button Click in jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='button']").on('click', function () {
var selValue = $("input[name='db']:checked").val();
if (selValue)
{
alert("You have selected : " + selValue);
}
});
});
</script>
</head>
<body>
<div>
<h1>Get Selected Radio Button Value on Button Click in jQuery</h1>
<h5> Select Database</h5>
<p>
<label><input type="radio" name="db" value="MySQL">MySQL</label>
<label><input type="radio" name="db" value="ORACLE">ORACLE</label>
<label><input type="radio" name="db" value="SQLite">SQLite</label>
<label><input type="radio" name="db" value="MS Access">MS Access</label>
</p>
<p> <input type="button" value="Get Value"></p>
</div>
</body>
</html>
If you liked this article, please consider sharing it on social media. If you have any query regarding this article feel free to comment. I will gladly help you. PHPCluster.