In this article, you will learn how to get the value of the selected radio button using jquery or javascript. There are various ways to get the selected value of the radio button using jquery or javascript. In this article, to get the selected radio button value, you can use the :checked CSS pseudo-class selector which can represent any radio (<input type="radio">) which is checked.
Here are some examples to get the value of the selected radio button using jquery or javascript.
In this example, we used the .val() function, the .val() method can be used to get the value of selected radio elements. When no options are selected, then it returns an undefined value.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="radio" name="option" value="free" />
Free Tutorials
</label>
<label>
<input type="radio" name="option" value="paid" />
Paid Tutorials
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn">
Check option button
</button>
</center>
<script type="text/javascript">
// Check the radio button value.
$("#btn").on("click", function () {
output = $("input[name=option]:checked").val();
$(".output").text(output);
});
</script>
</body>
</html>In this example, we used the .filter() method, .filter() method takes a selector expression and matches it against the current set of elements and returns elements that match certain criteria.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="radio" name="option" value="free" />
Free Tutorials
</label>
<label>
<input type="radio" name="option" value="paid" />
Paid Tutorials
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn" onclick="getSelectedValue()">
Check option button
</button>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var radio = $("input[type=radio][name=option]").filter(":checked")[0];
if (radio) {
$(".output").text(radio.value);
} else {
alert("Nothing is selected");
}
});
});
</script>
</body>
</html>In this example, we used the document.querySelector() method to get the selected radio button value. This document.querySelector() method is used to access the matched element.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</title>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="radio" name="option" value="free" />
Free Tutorials
</label>
<label>
<input type="radio" name="option" value="paid" />
Paid Tutorials
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn" onclick="getSelectedValue()">
Check option button
</button>
</center>
<script type="text/javascript">
function getSelectedValue() {
var output = document.querySelector('[name="option"]:checked').value;
document.querySelector(".output").innerText = output;
}
</script>
</body>
</html>In this example, we used the javascript for...of loop by which you can loop through each <radio> button, and by using condition check, you can get the selected radio button value.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</title>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="radio" name="option" value="free" />
Free Tutorials
</label>
<label>
<input type="radio" name="option" value="paid" />
Paid Tutorials
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn" onclick="getSelectedValue()">
Check option button
</button>
</center>
<script type="text/javascript">
function getSelectedValue() {
var radios = document.getElementsByName("option");
for (var radio of radios) {
if (radio.checked) {
document.querySelector(".output").innerText = radio.value;
}
}
}
</script>
</body>
</html>In this example, we used the javascript Array.from() method which returns an Array object from any object with a length property or an iterable object. And find() method which returns the value of the first element in an array that passes the given condition.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</title>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of Selected Radio Button Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="radio" name="option" value="free" />
Free Tutorials
</label>
<label>
<input type="radio" name="option" value="paid" />
Paid Tutorials
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn" onclick="getSelectedValue()">
Check option button
</button>
</center>
<script type="text/javascript">
function getSelectedValue() {
var radios = document.getElementsByName("option");
var selected = Array.from(radios).find((radio) => radio.checked);
document.querySelector(".output").innerText = selected.value;
}
</script>
</body>
</html>I hope this article will help you to understand how to get the value of the selected radio button using jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments