Can anyone help with creating radio buttons using createElement() in a loop? I have successfully created the radio buttons, but when selecting a second radio button after the first one is selected, the first one does not get deselected. Here is the link to the Plunker showcasing the customized radio buttons creation using createElement(). Any assistance would be greatly appreciated.
function myFunction() {
var obdiv = document.getElementById("odiv")
for (var i = 0; i < 5; i++) {
var y = document.createElement("LABEL")
var att = document.createAttribute("class")
att.value = "container"
y.setAttributeNode(att)
var spane = document.createElement("span")
var spanatt = document.createAttribute("class")
spanatt.value = "checkmark"
spane.setAttributeNode(spanatt)
const btn = document.createElement('input')
btn.type = 'radio'
y.appendChild(btn)
y.appendChild(spane)
obdiv.appendChild(y)
}
}/* The container */
.container {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}<body onload="myFunction()">
<div id="odiv"></div>
</body>