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 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>- 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
innerHTMLin instead of after the loop? – Andreas Commented Apr 7, 2017 at 6:22
3 Answers
Reset to default 3You 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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745231825a4617710.html
评论列表（0条）