JavaScript Select Radio Button Based On Value
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript select radio button based on value, 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's style by clicking on the radio button.
We will be using the .style property to use to add style to HTML elements using JavaScript in the example below.
Step By Step Guide On JavaScript Select Radio Button Based On Value :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript select radio button based on value </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> javascript select radio button based on value </h3>
</center>
<form action="">
<input type="radio" name="color" value="red">
<label> red </label>
<br>
<input type="radio" name="color" value="green">
<label> green </label>
<br>
<input type="radio" name="color" value="blue">
<label> blue </label>
<br>
<input type="radio" name="color" value="yellow">
<label> yellow</label>
<br>
<input type="radio" name="color" value="pink">
<label> pink </label>
<br>
<input type="radio" name="color" value="black">
<label> black </label>
<br>
<input type="radio" name="color" value="orange">
<label> orange </label>
</form>
<script>
let radios = document.getElementsByName('color') ;
for(let i=0; i< radios.length; i++) {
radios[i].onclick = function() {
let target = document.body;
target.style.backgroundColor = radios[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
- Now creating r form with the <form> tag and close with </form> tag
- Create some <input> tags with the type of radio and some values of colors. Give all the radio buttons the same name. The label is added of the same color of value using <label> tag.
- Using <br> tag to separate the lines
- <script> tag is created write JavaScript within it.
- Use Let to create a variable radios to get the elements by name by using document.getElementByName()
- Create a for loop first. Inside it creates a onclick function.
- Inside the function create a variable to access the document body.
- Using the .style property with the target to give background color as same as the value of the radio button
- By clicking the radio button we change the background colour of our HTML page.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to use select radio button based on value JavaScript.
I hope this article on JavaScript select radio button based on value helps you and the steps and method mentioned above are easy to follow and implement
About Ashish
