Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to dynamically create radio buttons using an array in JavaScript?
Creating radio buttons dynamically using an array in JavaScript is a useful way to provide users with multiple options for input. When the user clicks on one of the radio buttons, it will be selected and any other choices will be deselected automatically.
This process can be automated by looping through an array that contains all the possible values and creating a new radio button element for each item in the array.
To dynamically create radio button using an array, use the concept of createElement() and appendChild().Let’s look at the concept to understand more about dynamically creating a radio buttons.
The createElement()Method
JavaScript's createElement() function can be used to dynamically create an HTML element node with the given name. The element node is created by this method using the element's name as an argument.
The appendChild() function or insertBefore() method can be used to insert a newly produced element in the page after it has been created.
Syntax
Following is the syntax for createElement()
document.createElement(nodename);
The appendChild() Method
The Node interface's appendChild() method adds a node to the end of the list of children of a given parent node. AppendChild() moves the supplied child, if it is a reference to an existing node in the document, from its present position to the new position.
Syntax
Following is the syntax for appendChild()
appendChild(aChild)
Let’s dive into the following examples to understand more about how to dynamically create radio buttons using an array in JavaScript.
Example
In the following example we are running the script to create a radio button.
<!DOCTYPE html>
<html>
<body>
Choose Gender:
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Others">Others<br>
<button type="button" onclick="radiobutton()">Submit</button><br>
<div id="result"></div>
<script>
function radiobutton() {
var ele = document.getElementsByName('gender');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("result").innerHTML = "Gender: "+ele[i].value;
}
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of radio buttons along with a submit. When the user selects the radio button and clicks the submit button, it will display the gender that was selected by the user.
Example
Consider the following example, we create a new radio button with necessary attributes and appends it to a container.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<div>
<button id="submit">Create</button>
</div>
<script>
document.getElementById('submit').onclick = function() {
var radiobox = document.createElement('input');
radiobox.type = 'radio';
radiobox.id = 'num';
radiobox.value = '22+age';
var label = document.createElement('label')
label.htmlFor = 'num';
var description = document.createTextNode('22+age');
label.appendChild(description);
var newline = document.createElement('br');
var container = document.getElementById('container');
container.appendChild(radiobox);
container.appendChild(label);
container.appendChild(newline);
}
</script>
</body>
</html>
When we execute the above script, it produces an output that includes a label button; when the user clicks the button, an event is triggered, and the radio buttons are created on the webpage.
4K+ Views
To Continue Learning Please Login