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 −
