In this tutorial we will see how to Get Selected Radio Button Value On Click using JavaScript. The onclick event is used with javascript checked property.
Table of Contents
HTML Code
HTML Code is given below, This code contains button element with onclick event and input radio elements with their labels.
<!DOCTYPE html>
<html>
<head>
<title>Get Selected Radio Button Value On Click using JavaScript</title>
</head>
<body>
<form>
<input type="radio" name="car" value="Ford">
<label>Ford</label>
<input type="radio" name="car" value="Jeep">
<label>Jeep</label>
<input type="radio" name="car" value="Tesla">
<label>Tesla</label>
</form>
<button onclick="getRadioValue()">Get Radio Value</button>
</body>
</html>
onclick Event
JavaScript Code is given below, In this code the onclick event is used to get the value of input element.
The onclick event occurs when an element is clicked, it is used to call a JavaScript function when click event is occurred.
JavaScript Checked Property
The JavaScript Checked Property is used to either set or return the checked state of a checkbox or radio buttons.
In this code .length property of javascript is used to run the main loop. This loop will check the state of all radio buttons one by one. This is done using the checked property. If radio button is checked then it's value will be displayed using alert() method.
JavaScript Code
Take a look at the code given below.
<script>
function getRadioValue() {
var radio = document.getElementsByName('car');
for(i = 0; i < radio.length; i++) {
if(radio[i].checked)
alert(radio[i].value);
}
}
</script>
Demo
Video Tutorial
Watch video tutorial on how to Get Selected Radio Button Value On Click using JavaScript.