How to create radio button dynamically using javascript?

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>

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>

Share Improve this question asked Apr 7, 2017 at 6:14 Poppins 1411 gold badge4 silver badges12 bronze badges

Why don't you use checkboxes ? – kecalace Commented Apr 7, 2017 at 6:15
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 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 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 Commented Apr 7, 2017 at 6:22

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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;
        }
    }

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.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to create radio button dynamically using javascript? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)