How to get selected Radio button value in jQuery
In this tutorial, we will get the value of select Radio Button using jQuery API. jQuery provides the :checked selector for getting the value of checked radio button. :checked selector added since version 1.0.
Get value on change
In this example, we are going to retrieve the selected radio button value onchange.
JS Snippet
$(document).ready(function () {
$("input[type='radio']").on('change', function () {
var selectedValue = $("input[name='lang']:checked").val();
if (selectedValue) {
alert("Hello, your favorite programming language= " + selectedValue);
}
});
});Check the full example
<!DOCTYPE html>
<html>
<head>
<title>How to get selected Radio button Value in jQuery</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type='radio']").on('change', function () {
var selectedValue = $("input[name='lang']:checked").val();
if (selectedValue) {
alert("Hello, your favorite programming language= " + selectedValue);
}
});
});
</script>
</head>
<body>
<h1>How to get selected Radio button Value in jQuery</h1>
<h4>Select your favorite programming language.</h4>
<p>
<label><input type="radio" name="lang" value="java">Java</label>
<label><input type="radio" name="lang" value="spring">Spring</label>
<label><input type="radio" name="lang" value="struts">Struts</label>
<label><input type="radio" name="lang" value="jquery">jQuery</label>
<label><input type="radio" name="lang" value="javascript">JavaScript</label>
<label><input type="radio" name="lang" value="c">C</label>
</p>
</body>
</html>Get value on button click
In this example, we are going to retrieve the selected radio button value on external button click.
JS Snippet
$(document).ready(function () {
$("input[type='button']").click(function () {
var selectedValue = $("input[name='bird']:checked").val();
if (selectedValue) {
alert("Hello, your favorite bird= " + selectedValue);
}
});
});Check the full example
<!DOCTYPE html>
<html>
<head>
<title>How to get selected Radio button Value in jQuery</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[type='button']").click(function () {
var selectedValue = $("input[name='bird']:checked").val();
if (selectedValue) {
alert("Hello, your favorite bird= " + selectedValue);
}
});
});
</script>
</head>
<body>
<h1>How to get selected Radio button Value in jQuery</h1>
<h4>Select your favorite bird.</h4>
<p>
<label><input type="radio" name="bird" value="Sparrow">Sparrow</label>
<label><input type="radio" name="bird" value="Parrot">Parrot</label>
<label><input type="radio" name="bird" value="Eagle">Eagle</label>
</p>
<p><input type="button" value="Get Value"></p>
</body>
</html>Similar Posts
About the Author
