Get Value Of Radio Button JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of get value of radio button JavaScript, in order to select exactly one option from a list, radio buttons are employed.
This tutorial includes certain radio buttons with values that may be selected based on the values, allowing us to modify the HTML document by clicking on the radio button.
And then we will see an example to get the value of the radio button as an alert of the HTML page.
We will be using the .style property to use to add style to HTML elements using JavaScript in another example below.
Step By Step Guide On Get Value Of Radio Button JavaScript :-
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> get value of radio button javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> get value of radio button javascript </h3>
</center>
<form action="">
<input type="radio" name="car" value="BMW">
<label for="">BMW</label>
<br>
<input type="radio" name="car" value="Ford">
<label for="">Ford</label>
<br>
<input type="radio" name="car" value="KIA">
<label for="">KIA</label>
<br>
<input type="radio" name="car" value="Audi">
<label for="">Audi</label>
<br>
<button onclick="getRadioValue()"> Get radio values </button>
</form>
<script>
function getRadioValue() {
var radio = document.getElementsByName('car') ;
for(let i=0; i<radio.length; i++) {
if(radio[i].checked) {
alert(radio[i].value) ;
}
}
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Create some <input> tags with the type of radio and some values of cars. Give all the radio buttons the same name. The label is added to the same car of value using <label> tag.
- Using <br> tag to separate the lines
- Create a <button> to get the value with the onclick of a function getRadioValue().
- <script> tag is created write JavaScript within it.
- First create a function getRadioValue().
- Use Let to create a variable radio to get the elements by name by using document.getElementByName()
- Now create a for loop and inside if create an if statement. If the radio button the checked then alert the value of the radio button.
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> get value of radio button JavaScript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> get value of radio button JavaScript </h3>
</center>
orange <input type="radio" value="Change Background" onclick="changeBackground()">
<script>
function changeBackground() {
document.body.style.background = "orange";
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- <input> tag is created with the type of radio.
- <script> tag is created write JavaScript within it.
- Create the function changeBackground() at first.
- Using .style property to give background and add the value as the input
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to get value of radio button JavaScript.
I hope this article on get value of radio button JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
