How to dynamically create radio buttons using an array in JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

To dynamically create radio button using an array, use the concept of createElement() and appendChild().

Example

Following is the code −

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
</body>
<script>
   var gender = ['Male', 'Female'];
   gender.forEach((genederValue, i) => {
      var labelValue = document.createElement('label');
      labelValue.innerHTML = genederValue;
      var inputValue = document.createElement('input');
      inputValue.type = "radio";
      inputValue.name = genederValue;
      inputValue.genederValue = i;
      document.body.appendChild(labelValue);
      document.body.appendChild(inputValue);
   });
</script>
</html>

To run the above program, save the file name anyName.html(index.html) and right click on the file. Select the option “Open with live server” in VS Code editor.

Output

This will produce the following output −

raja
Published on 26-Oct-2020 13:58:48
Advertisements