1

谁能给我一个工作代码，用于在 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);
}
4

2 回答 2

3 
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);

如果你需要广播组，你应该给他们相同的名字。这是小提琴

于 2013-04-24T06:19:15.517 回答
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>

（您不能for在 JavaScript 中使用该属性；属性名称为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>

您应该通过添加在项目之间添加换行符的代码来最小程度地增强这一点，或者最好将每对按钮及其标签放在divelemebt 中。

于 2013-04-24T07:34:59.687 回答