How to create radio button dynamically using javascript?

Question

I want to display a list of data stored in array and against each data I want to put a yes and no radio button. I have generated radio button dynamically, but from all the radio buttons I can only select one at a time, but it should be like, for each data I can select either yes or no. Please help as I am new to JavaScript.

function displayData()
{
	var data=['Apple', 'Banana', 'Kiwi'];
	var output="";
	var output2="";
	var dataList;
	
	for(var i=0; i< data.length; i++)
	{
		dataList=data[i];
		output+= '<input type="checkbox" value='+dataList+' name="box2">'  + '   ' + dataList+'   '+'<br><br>';
		output2+= 'yes:<input type="radio" value="yes" name="box2">'+'no:<input type="radio" value="yes" name="box2">'+'<br><br>';
		document.getElementById("dataList").innerHTML=output;
		document.getElementById("radioBtn").innerHTML=output2;
	}
}

<html>
<body onload="displayData()">
<div class="row">
  <div class="col-sm-4"><div id="dataList"> </div></div>
  <div class="col-sm-4"><div id="radioBtn"></div></div>
</div>
</body>
</html>

I have used checkbox for some different purpose and I want the user to be able to select only one input for each data either yes or no. — Poppins
– Poppins, Commented Apr 7, 2017 at 6:18
Each iteration in the for loop should generate two radio buttons with the same unique for the two name, you can for example append the i variable to the name: 'yes:<input type="radio" value="yes" name="box2-' + i + '">' Respectively do this for the "no" radio control as well. — Samuil Petrov
– Samuil Petrov, Commented Apr 7, 2017 at 6:21
They all have the same name. And why do you change the innerHTML in instead of after the loop? — Andreas
– Andreas, Commented Apr 7, 2017 at 6:22

Pramod Patil · Accepted Answer · 2017-04-07 06:24:53Z

You need to assign diffrent name to each row of checkbox. Please check below code

function displayData()
    {
        var data=['Apple', 'Banana', 'Kiwi'];
        var output="";
        var output2="";
        var dataList;

        for(var i=0; i< data.length; i++)
        {
            dataList=data[i];
            output+= '<input type="checkbox" value='+dataList+' name="box2'+i+'">'  + '   ' + dataList+'   '+'<br><br>';
            output2+= 'yes:<input type="radio" value="yes" name="box2'+i+'">'+'no:<input type="radio" value="yes" name="box2'+i+'">'+'<br><br>';
            document.getElementById("dataList").innerHTML=output;
            document.getElementById("radioBtn").innerHTML=output2;
        }
    }

pwetosaurus · Accepted Answer · 2017-04-07 06:24:43Z

1

This is not what a radio button is for, at least, in your implementation.

You must use a radio group name for each of your yes/no choices.

if you change the name="box2" HTML property by a dynamic name, for example name="box' + i + '"', it should work as expected.

answered Apr 7, 2017 at 6:24

pwetosaurus

1095 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-04-07 06:27:58Z

When you are adding radio buttons make sure to add button names dynamically

<input type="radio" value="yes" name="'+data[i]+'">'

Demo

function displayData()
{
	var data=['Apple', 'Banana', 'Kiwi'];
	var output="";
	var output2="";
	var dataList;
	
	for(var i=0; i< data.length; i++)
	{
		dataList=data[i];
		output+= '<input type="checkbox" value='+dataList+' name="box2">'  + '   ' + dataList+'   '+'<br><br>';
		output2+= 'yes:<input type="radio" value="yes" name="'+data[i]+'">'+'no:<input type="radio" value="yes" name="'+data[i]+'">'+'<br><br>';
		document.getElementById("dataList").innerHTML=output;
		document.getElementById("radioBtn").innerHTML=output2;
	}
}

<html>
<body onload="displayData()">
<div class="row">
  <div class="col-sm-4"><div id="dataList"> </div></div>
  <div class="col-sm-4"><div id="radioBtn"></div></div>
</div>
</body>
</html>

Collectives™ on Stack Overflow

How to create radio button dynamically using javascript?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related