Html中爲IE單選按鈕動態創建

任何人都可以給我一個工作代碼，用於在IE，Firefox和Chrome中運行的html（和javascript）中創建動態單選按鈕？Html中爲IE單選按鈕動態創建

我在互聯網上看到了很多代碼，但他們都沒有爲我工作。

我也需要他們有一個標籤。我不想使用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); 
}

來源

2013-04-24 Translator Translator

你真的嘗試過了什麼？顯示你找到的一些簡單的選擇，並解釋它在哪種意義上不起作用。 – 2013-04-24 06:28:52

@ JukkaK.Korpela，我試過這段代碼： – 2013-04-24 06:59:06

function test（）{ var element = document.createElement（「input」）; //爲元素分配不同的屬性。 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）; } – 2013-04-24 06:59:37

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

來源

2013-04-24 06:19:15 karaxuna

'label1.setAttribute（'for'，radio1.id）;'你需要做'label1。htmlFor = radio1.id;' – 2013-04-24 06:42:32

代碼的主要問題（您發佈在評論中，我複製到問題中）是它只包含一個函數定義。該函數根本不被調用，所以需要有一個像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>

你應該最低限度地添加代碼，增加了換行符項目之間，最好把每一對按鈕和它的標籤一div elemebt內加強這方面的。

來源

2013-04-24 07:34:59

非常感謝您的幫助。當然，我將代碼放在標籤中，並將其稱爲某處。但它在IE中不起作用。它在IE中適合你嗎？我使用IE9 – 2013-04-24 13:48:42

是的，它在IE中也可以正常工作。你的問題可能是腳本代碼，包括函數的調用，在'head'元素中。然後id'divTxt'沒有被定義，並且操作失敗（你應該在控制檯日誌中看到一條錯誤消息）。然後一個簡單的解決方法就是將函數調用放在'body'結尾處的'script'元素中。 – 2013-04-24 14:17:06

Html中爲IE單選按鈕動態創建

回答

相關問題