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

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

javascript

如何在Javascript中动态创建一个在所有浏览器中都能工作的单选按钮？,javascript,Javascript,使用eg动态创建单选按钮 var radioInput = document.createElement('input'); radioInput.setAttribute('type', 'radio'); radioInput.setAttribute('name', name); 可以在Firefox中使用，但不能在IE中使用。为什么不可以呢？根据本文及其评论：下面的工作。显然，问题是你不能在IE中动态设置name属性。我还发现你也不能动态设置checked属性 function c

使用eg动态创建单选按钮

var radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);

可以在Firefox中使用，但不能在IE中使用。为什么不可以呢？

根据本文及其评论：

下面的工作。显然，问题是你不能在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;
}

函数createRadioElement（名称，选中）{
放射输入；
试一试{
var radioHtml=''；
radioInput=document.createElement（radioHtml）；
}捕捉（错误）{
radioInput=document.createElement（“输入”）；
radioInput.setAttribute（'type'，'radio'）；
radioInput.setAttribute（'name'，name）；
如果（选中）{
radioInput.setAttribute（'checked'，'checked'）；
}
}
返回放射性输入；
}

我的建议是不要使用document.Create（）。更好的解决方案是构造未来控件的实际HTML，然后将其像innerHTML一样分配给某个占位符——它允许浏览器自己呈现它，这比任何JS DOM操作都要快得多

干杯。

Patrick的答案有效，或者您也可以设置“defaultChecked”属性（这在IE中适用于radio或checkbox元素，不会在其他浏览器中导致错误）

PS此处列出了无法在IE中设置的完整属性列表：

按照Patrick的建议，使用一个临时节点，我们可以摆脱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;
}

函数createRadioElement（名称，选中）{
var radioHtml=''；
var radioFragment=document.createElement（'div'）；
radioFragment.innerHTML=radioHtml；
返回radioFragment.firstChild；
}

以下是一个更通用的解决方案示例，该解决方案可预先检测IE并处理IE也有问题的其他属性，提取自：

var createElement=（函数（）
{
//使用条件编译检测IE
如果（/*@cc_on@*/*@if（@_win32）！/*@end@*/false）
{
//IE可能会阻塞的属性名称的翻译
var属性转换=
{
“类”：“类名称”，
“for”：“htmlFor”
};
var setAttribute=函数（元素、属性、值）
{
if（attrTranslations.hasOwnProperty（attr））
{
元素[attr]]=值；
}
else if（属性==“样式”）
{
element.style.cssText=值；
}
其他的
{
setAttribute（属性，值）；
}
};
返回函数（标记名、属性）
{
属性=属性| |{}；
//看http://channel9.msdn.com/Wiki/InternetExplorerProgrammingBugs
if（attributes.hasOwnProperty（“名称”）||
attributes.hasOwnProperty（“选中”）||
attributes.hasOwnProperty（“多个”））
{
var tagParts=[“”；
变量元素=
document.createElement（tagParts.join（“”））；
}
其他的
{
var元素=document.createElement（标记名）；
}
for（属性中的var attr）
{
if（attributes.hasOwnProperty（attr））
{
setAttribute（元素、属性、属性[attr]）；
}
}
返回元素；
};
}
//所有其他浏览器
其他的
{
返回函数（标记名、属性）
{
属性=属性| |{}；
var元素=document.createElement（标记名）；
for（属性中的var attr）
{
if（attributes.hasOwnProperty（attr））
{
setAttribute（attr，attributes[attr]）；
}
}
返回元素；
};
}
})();
//用法
var rb=createElement（“输入”{type:“radio”，选中：true}）；

完整的DOMBuilder版本还处理事件侦听器注册和子节点的指定。

为什么不创建输入，将样式设置为dispaly:none，然后在必要时更改显示

通过这种方式，您也可以更好地处理没有js的用户。

就我个人而言，我不会自己创建节点。正如您所注意到的，存在太多特定于浏览器的问题。通常我使用from。使用这种方式，您的代码会变成这样：

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

快速回复旧帖子：

Roundcrisis上面的帖子很好，如果且仅当您知道将要使用的单选/复选框控件的数量。在某些情况下，通过“动态创建单选按钮”主题解决，用户需要的控件数量未知。此外，我不建议“跳过”try-catch error陷阱，因为这样可以轻松捕获可能不符合当前标准的未来浏览器实现。在这些解决方案中，我建议使用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;}

函数createRadioElement（名称，选中）{
放射输入；
试一试{
var radioHtml=''；
radioInput=document.createElement（radioHtml）；
}捕捉（错误）{
radioInput=document.createElement（“输入”）；
radioInput.setAttribute（'type'，'radio'）；
radioInput.setAttribute（'name'，name）；
如果（选中）{
radioInput.setAttribute（'checked'，'checked'）；
}
}
返回放射性输入；}

我的解决方案：

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')

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>


/*正在获取将在其中添加单选按钮的Div的Id*/
var containerDivClientId=“”；
/*变量计数用于定义单选按钮和组名的唯一ID*/
var计数=100；
/*T
<%@ 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>

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