1. 首页
  2. 问答
  3. 如何在Javascript中动态创建一个可在所有浏览器中工作的单选按钮？

如何在Javascript中动态创建一个可在所有浏览器中工作的单选按钮？

2008-09-23 35 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

相关问题

 相关问题