Question

我想显示存储在数组中的数据列表，并针对我想要设置是和否单选按钮的每个数据。我已经动态生成了单选按钮，但是从所有单选按钮我一次只能选择一个，但应该是这样，对于每个数据，我可以选择是或否。请帮忙，因为我是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>

Answer 1

您需要为复选框的每一行指定不同的名称。请检查以下代码

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

Answer 2

至少在您的实施中，这不是单选按钮的用途。

您必须为每个是/否选择使用广播组名称。

如果您使用动态名称更改name="box2" HTML属性，例如name="box' + i + '"'，则应该按预期工作。

Answer 3

添加单选按钮时，请务必动态添加按钮名称

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用javascript动态创建单选按钮？

3 个答案: