Question

有人可以给我一个工作代码，用于在IE，Firefox和Chrome中运行的html（和javascript）中创建动态单选按钮吗？

我在互联网上看到了很多代码，但它们都没有为我工作。

我还需要他们有标签。而且我不想使用Jquery。

试过这段代码：

function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.for = "source_id";
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}

Answer 1

var radio1 = document.createElement('input');
radio1.id = 'myRadioId1';
radio1.type = 'radio';
radio1.name = 'radioGroup';
radio1.value = 'someValue1';

var radio2 = document.createElement('input');
radio2.id = 'myRadioId2';
radio2.type = 'radio';
radio2.name = 'radioGroup';
radio2.value = 'someValue2';

var label1 = document.createElement('label');
label1.htmlFor = radio1.id;
label1.innerHTML = 'label for radio1';

var label2 = document.createElement('label');
label2.htmlFor = radio2.id;
label2.innerHTML = 'label for radio2';

附加到容器：

var container = document.getElementById('mydivid');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);

如果你需要无线电组，你应该给他们相同的名字。这是fiddle

Answer 2

代码的主要问题（您在评论中发布并复制到问题中）是它只包含一个函数定义。该函数根本不被调用，因此需要有test()之类的语句。此外，该函数假定页面上有一个带id=divTxt的元素，该元素必须在调用函数之前出现。以下代码成功创建了一个单选按钮元素及其标签，并将它们插入到页面上的现有元素中：

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function test() {
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute('type', 'radio');
element.setAttribute('value', 'source');
element.setAttribute('name', 'source'); 
element.setAttribute('id', 'source_id');
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("Label"); 
newlabel2.setAttribute('for', "source_id");
newlabel2.innerHTML = "first name ";
foo.appendChild(newlabel2);
}
test();
</script>

（您不能在JavaScript中使用for属性;属性名称为htmlFor，但如上所述设置for 属性可能更为简单。）

但是，由于其性质，单选按钮应始终以组的形式出现，因此您应该使用带有一些参数的函数根据常见模式生成一组单选按钮。像这样：

<!DOCTYPE html>
<title>Demo</title>
<div id=divTxt></div>
<script>
function radio(name, value, text) {
var element = document.createElement("input");
var id = name + value;
element.setAttribute('type', 'radio');
element.setAttribute('value', value);
element.setAttribute('name', name); 
element.setAttribute('id', id);
var foo = document.getElementById("divTxt");
foo.appendChild(element);
var newlabel2 = document.createElement("label"); 
newlabel2.setAttribute('for', id);
newlabel2.innerHTML = text;
foo.appendChild(newlabel2);
}
radio('sex', '0', 'male');
radio('sex', '1', 'female');
</script>

您应该通过添加在项目之间添加换行符的代码来最低限度地增强此功能，或者最好将每对按钮及其标签放在div元素中。

在Html for IE中动态创建单选按钮

2 个答案: