Как Вы динамично создаете переключатель в JavaScript, который работает во всех браузерах?

На основе этого сообщения и его комментариев: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

следующие работы. По-видимому, проблема состоит в том, что Вы не можете динамично установить свойство имени в IE. Я также нашел, что Вы не можете динамично установить проверенный атрибут также.

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

Вот пример более общего решения, которое обнаруживает 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 также обрабатывает регистрация прослушивателя событий и спецификация дочерних узлов.

Лично я не создал бы узлы сам. Поскольку Вы заметили, что существуют только слишком многие браузер определенные проблемы. Обычно я использую Builder.node от script.aculo.us. Используя этот Ваш код стал бы чем-то вроде этого:

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

Динамически создаваемый переключатель в 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>

( источник )

Быстрый ответ на старое сообщение:

Пост выше Roundcrisis - это хорошо, ЕСЛИ И ТОЛЬКО ЕСЛИ вы знаете количество радио / флажков, которые будут использоваться заранее. В некоторых ситуациях, рассматриваемых в этой теме «динамически создаваемых переключателей», количество элементов управления, которые потребуются пользователю, неизвестно. Кроме того, я не рекомендую «пропускать» перехват ошибок «try-catch», поскольку это позволяет легко отследить будущие реализации браузера, которые могут не соответствовать действующим стандартам. Из этих решений я рекомендую использовать решение, предложенное Патриком Уилксом в своем ответе на свой вопрос.

Это повторяется здесь, чтобы избежать путаницы:

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

Мое предложение не использовать document.Create (). Лучшее решение - создать реальный HTML будущего управления, а затем назначить его, как innerHTML, некоторому заполнителю - он позволяет браузеру отображать его сам, что намного быстрее, чем любые манипуляции с JS DOM.

Ура.

Работы ответа Patrick, или можно установить атрибут "defaultChecked" также (это будет работать в IE на элементы радио-или флажка и не вызовет ошибки в других браузерах.

Полный список пз атрибутов, которые Вы не можете установить в IE, перечислен здесь:

http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

Почему бы не создавать входные данные, установите стиль для отображения: нет, а затем при необходимости измените отображение, так что вы также, вероятно, сможете лучше обрабатывать пользователей без js.

Делая шаг от того, что предлагает Патрик, используя временный узел, мы можем избавиться от 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;
}