1. 首頁
  2. 問答
  3. 如何在Javascript中動態創建一個可在所有瀏覽器中工作的單選按鈕？

如何在Javascript中動態創建一個可在所有瀏覽器中工作的單選按鈕？

2008-09-23 54 views

回答

9

： http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

以下工作。顯然問題是你不能在IE中動態設置name屬性。我也發現你不能動態設置checked屬性。

function createRadioElement(name, checked) { 
    var radioInput; 
    try { 
     var radioHtml = '<input type="radio" name="' + name + '"'; 
     if (checked) { 
      radioHtml += ' checked="checked"'; 
     } 
     radioHtml += '/>'; 
     radioInput = document.createElement(radioHtml); 
    } catch(err) { 
     radioInput = document.createElement('input'); 
     radioInput.setAttribute('type', 'radio'); 
     radioInput.setAttribute('name', name); 
     if (checked) { 
      radioInput.setAttribute('checked', 'checked'); 
     } 
    } 

    return radioInput; 
}

來源

2008-09-23 01:50:31

0

我的建議是不要使用document.Create（）。更好的解決方案是構建未來控件的實際HTML，然後像innerHTML一樣將其分配給某個佔位符 - 它允許瀏覽器自己渲染它，這比任何JS DOM操作都快得多。

乾杯。

來源

2008-09-23 01:51:10 dimarzionist

21

考慮從什麼帕特里克建議的步驟，使用臨時節點，我們可以擺脫try/catch語句的：

function createRadioElement(name, checked) { 
    var radioHtml = '<input type="radio" name="' + name + '"'; 
    if (checked) { 
     radioHtml += ' checked="checked"'; 
    } 
    radioHtml += '/>'; 

    var radioFragment = document.createElement('div'); 
    radioFragment.innerHTML = radioHtml; 

    return radioFragment.firstChild; 
}

來源

2008-09-23 04:10:47 Prestaul

4

下面是更通用的解決方案的例子，其檢測IE前面，並處理其他屬性IE也具有問題，從DOMBuilder提取：

var createElement = (function() 
{ 
    // Detect IE using conditional compilation 
    if (/*@cc_on @*//*@if (@_win32)!/*@end @*/false) 
    { 
     // Translations for attribute names which IE would otherwise choke on 
     var attrTranslations = 
     { 
      "class": "className", 
      "for": "htmlFor" 
     }; 

     var setAttribute = function(element, attr, value) 
     { 
      if (attrTranslations.hasOwnProperty(attr)) 
      { 
       element[attrTranslations[attr]] = value; 
      } 
      else if (attr == "style") 
      { 
       element.style.cssText = value; 
      } 
      else 
      { 
       element.setAttribute(attr, value); 
      } 
     }; 

     return function(tagName, attributes) 
     { 
      attributes = attributes || {}; 

      // See http://channel9.msdn.com/Wiki/InternetExplorerProgrammingBugs 
      if (attributes.hasOwnProperty("name") || 
       attributes.hasOwnProperty("checked") || 
       attributes.hasOwnProperty("multiple")) 
      { 
       var tagParts = ["<" + tagName]; 
       if (attributes.hasOwnProperty("name")) 
       { 
        tagParts[tagParts.length] = 
         ' name="' + attributes.name + '"'; 
        delete attributes.name; 
       } 
       if (attributes.hasOwnProperty("checked") && 
        "" + attributes.checked == "true") 
       { 
        tagParts[tagParts.length] = " checked"; 
        delete attributes.checked; 
       } 
       if (attributes.hasOwnProperty("multiple") && 
        "" + attributes.multiple == "true") 
       { 
        tagParts[tagParts.length] = " multiple"; 
        delete attributes.multiple; 
       } 
       tagParts[tagParts.length] = ">"; 

       var element = 
        document.createElement(tagParts.join("")); 
      } 
      else 
      { 
       var element = document.createElement(tagName); 
      } 

      for (var attr in attributes) 
      { 
       if (attributes.hasOwnProperty(attr)) 
       { 
        setAttribute(element, attr, attributes[attr]); 
       } 
      } 

      return element; 
     }; 
    } 
    // All other browsers 
    else 
    { 
     return function(tagName, attributes) 
     { 
      attributes = attributes || {}; 
      var element = document.createElement(tagName); 
      for (var attr in attributes) 
      { 
       if (attributes.hasOwnProperty(attr)) 
       { 
        element.setAttribute(attr, attributes[attr]); 
       } 
      } 
      return element; 
     }; 
    } 
})(); 

// Usage 
var rb = createElement("input", {type: "radio", checked: true});

完整DOMBuilder版本還處理事件偵聽器註冊節點和子節點的規範。

來源

2008-09-23 11:15:40

0

爲什麼不創建輸入，將樣式設置爲顯示：無，然後在需要時更改顯示器 這樣，您也可以更好地處理用戶。

來源

2008-09-23 11:29:57 roundcrisis

4

就我個人而言，我不會創建節點。正如你已經注意到，瀏覽器的具體問題太多了。通常我使用script.aculo.us的Builder.node。使用這個代碼將成爲像這樣：

Builder.node('input', {type: 'radio', name: name})

來源

2008-09-23 11:31:46 ujh

1

快速回復到一個較早的帖子：

以上職位由Roundcrisis是好的，當且僅當，你知道無線電/複選框控制的數量這將在手前使用。在某些情況下，通過「動態創建單選按鈕」這個主題來解決，用戶需要的控件數目是未知的。此外，我不建議'跳過''try-catch'錯誤陷阱，因爲這樣可以輕鬆捕獲未來可能不符合當前標準的瀏覽器實現。在這些解決方案中，我建議使用Patrick Wilkes在他自己的問題的答覆中提出的解決方案。

這是在這裏重複，以努力避免混淆：

function createRadioElement(name, checked) { 
    var radioInput; 
    try { 
     var radioHtml = '<input type="radio" name="' + name + '"'; 
     if (checked) { 
      radioHtml += ' checked="checked"'; 
     } 
     radioHtml += '/>'; 
     radioInput = document.createElement(radioHtml); 
    } catch(err) { 
     radioInput = document.createElement('input'); 
     radioInput.setAttribute('type', 'radio'); 
     radioInput.setAttribute('name', name); 
     if (checked) { 
      radioInput.setAttribute('checked', 'checked'); 
     } 
    } 
    return radioInput;}

來源

2009-12-20 18:23:20 Cypher

2

我的解決辦法：

html 
    head 
     script(type='text/javascript') 
      function createRadioButton() 
      { 
       var newRadioButton 
       = document.createElement(input(type='radio',name='radio',value='1st')); 
       document.body.insertBefore(newRadioButton); 
      } 
    body 
     input(type='button',onclick='createRadioButton();',value='Create Radio Button')

來源

2011-12-14 10:41:02 Dheeraj

4

在JavaScript中動態創建的單選按鈕：

<%@ Page Language=」C#」 AutoEventWireup=」true」 CodeBehind=」RadioDemo.aspx.cs」 Inherits=」JavascriptTutorial.RadioDemo」 %> 

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」> 

<html xmlns=」http://www.w3.org/1999/xhtml」> 
<head runat=」server」> 
<title></title> 
<script type=」text/javascript」> 

/* Getting Id of Div in which radio button will be add*/ 
var containerDivClientId = 「<%= containerDiv.ClientID %>」; 

/*variable count uses for define unique Ids of radio buttons and group name*/ 
var count = 100; 

/*This function call by button OnClientClick event and uses for create radio buttons*/ 
function dynamicRadioButton() 
{ 
/* create a radio button */ 
var radioYes = document.createElement(「input」); 
radioYes.setAttribute(「type」, 「radio」); 

/*Set id of new created radio button*/ 
radioYes.setAttribute(「id」, 「radioYes」 + count); 

/*set unique group name for pair of Yes/No */ 
radioYes.setAttribute(「name」, 「Boolean」 + count); 

/*creating label for Text to Radio button*/ 
var lblYes = document.createElement(「lable」); 

/*create text node for label Text which display for Radio button*/ 
var textYes = document.createTextNode(「Yes」); 

/*add text to new create lable*/ 
lblYes.appendChild(textYes); 

/*add radio button to Div*/ 
containerDiv.appendChild(radioYes); 

/*add label text for radio button to Div*/ 
containerDiv.appendChild(lblYes); 

/*add space between two radio buttons*/ 
var space = document.createElement(「span」); 
space.setAttribute(「innerHTML」, 「&nbsp;&nbsp」); 
containerDiv.appendChild(space); 

var radioNo = document.createElement(「input」); 
radioNo.setAttribute(「type」, 「radio」); 
radioNo.setAttribute(「id」, 「radioNo」 + count); 
radioNo.setAttribute(「name」, 「Boolean」 + count); 

var lblNo = document.createElement(「label」); 
lblNo.innerHTML = 「No」; 
containerDiv.appendChild(radioNo); 
containerDiv.appendChild(lblNo); 

/*add new line for new pair of radio buttons*/ 
var spaceBr= document.createElement(「br」); 
containerDiv.appendChild(spaceBr); 

count++; 
return false; 
} 
</script> 
</head> 
<body> 
<form id=」form1″ runat=」server」> 
<div> 
<asp:Button ID=」btnCreate」 runat=」server」 Text=」Click Me」 OnClientClick=」return dynamicRadioButton();」 /> 
<div id=」containerDiv」 runat=」server」></div> 
</div> 
</form> 
</body> 
</html>

（source）

來源

2012-09-12 12:15:54

+1

龍鏈接[視爲一個貧窮的答案（http://stackoverflow.com/faq#deletion），因爲它本身就是無意義的目標資源不能保證在未來的活着。請儘量至少包含您要鏈接的信息摘要。 – j0k 2012-09-12 12:20:39

+0

containerDivClientId是否被使用？ – HeyWatchThis 2013-11-14 16:50:25

0 
 for(i=0;i<=10;i++){ 
     var selecttag1=document.createElement("input"); 
     selecttag1.setAttribute("type", "radio"); 
     selecttag1.setAttribute("name", "irrSelectNo"+i); 
     selecttag1.setAttribute("value", "N"); 
     selecttag1.setAttribute("id","irrSelectNo"+i); 


     var lbl1 = document.createElement("label"); 
     lbl1.innerHTML = "YES"; 

      cell3Div.appendChild(lbl); 
      cell3Div.appendChild(selecttag1);

}

來源

2015-10-22 13:11:20

相關問題

 相關問題