Question

我尝试从“选择”列表中选择项目并生成“广播”列表。

我们说我在列表中有这些选项：

ABC
DAB

我想将它们打印在这样的广播列表中：

(radiobutton1) abc  
(radiobutton2) dab

但是现在我只是得到这样的结果：

(radiobutton1)(radiobutton2) abc dab

这是我的代码：

HTML

 <radio id = MyRadio multiple></radio>
 <label id = MyLabel multiple></label>

和Javascript：

function btn2Click() {
    var SelectedItems = document.getElementById("MyList");  
    var i;
    for (i = 0; i < SelectedItems.length; i++) 
    {
        if(SelectedItems.options[i].selected)
        {
        var RadioSelect = document.createElement("INPUT");
        RadioSelect.setAttribute("type", "radio");
        var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
        RadioSelect.appendChild(RadioText);
        document.getElementById("MyRadio").appendChild(RadioSelect);
        document.getElementById("MyLabel").appendChild(RadioText);
        }
    }
}

Answer 1

标签使用for属性。 for属性需要引用无线电输入的id。

if(SelectedItems.options[i].selected)
{
    var RadioSelect = document.createElement("INPUT");
    RadioSelect.setAttribute("type", "radio");
    var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
    document.getElementById("MyRadio").appendChild(RadioSelect);
    document.getElementById("MyLabel").appendChild(RadioText);
}

将标签html更改为：

<label id="MyLabel" for="MyRadio" multiple></label>

Answer 2

这样的事情？ http://jsfiddle.net/swm53ran/101/

<div class="radioButtons">
    Place Radio Buttons Here
    <br/>
</div>

$(document).ready(function() {
    var list = ['dog', 'cat', 'fish'];
    var html = "<input type='radio'/>";
    for (var i = 0; i < list.length; i++) {
        $('.radioButtons').append(html + list[i] + '<br/>');
    }
});

Answer 3

HTML

<div id="myRadioButtons" />

<强> JS

var html='';
$.each(['apply', 'pear', 'peach', 'lime'], function (i, v){
     html += "<input type='radio'/>" + v + '<br/>';    
});
$('#myRadioButtons').append(html);

<强> DEMO

生成带标签的单选按钮

3 个答案: