link - ¿Cómo se crea dinámicamente un botón de opción en Javascript que funciona en todos los navegadores?

habilitar javascript en chrome en windows

Question

Creación dinámica de un botón de opción usando, por ejemplo,

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

funciona en Firefox pero no en IE. Por qué no?

Answer 1

¿Por qué no crear la entrada, configurar el estilo para dispaly: none y luego cambiar la pantalla cuando sea necesario de esta manera también es probable que pueda manejar usuarios que no sean mejores js.

Answer 2

Aquí hay un ejemplo de solución más general que detecta IE por adelantado y maneja otros atributos con los que IE también tiene problemas, extraído de 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});

La versión completa de DOMBuilder también maneja el registro del oyente de eventos y la especificación de los nodos secundarios.

Answer 3

Basado en esta publicación y sus comentarios: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

los siguientes trabajos. Aparentemente, el problema es que no se puede establecer dinámicamente la propiedad del nombre en IE. También descubrí que tampoco puede establecer dinámicamente el atributo comprobado.

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

Answer 4

La respuesta de Patrick funciona, o puede establecer el atributo "defaultChecked" también (esto funcionará en IE para elementos de radio o checkbox, y no causará errores en otros navegadores).

PD La lista completa de atributos que no puede establecer en IE se detalla a continuación:

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

Answer 5

Mi sugerencia es no usar document.Create (). Una mejor solución es construir HTML real de control futuro y luego asignarlo como innerHTML a algún marcador de posición: permite que el navegador lo renderice, lo que es mucho más rápido que cualquier manipulación de JS DOM.

Aclamaciones.

Answer 6

Personalmente, no crearía nodos yo mismo. Como habrás notado, hay demasiados problemas específicos del navegador. Normalmente uso Builder.node desde script.aculo.us . Usando esto tu código se convertiría en algo como esto:

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

Answer 7

Tomando un paso de lo que Patrick sugiere, usando un nodo temporal podemos deshacernos del 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;
}

Answer 8

Respuesta rápida a una publicación anterior:

La publicación anterior de Roundcrisis está bien, SI Y SOLO SI, conoce la cantidad de controles de radio / casilla de verificación que se utilizarán con anterioridad. En algunas situaciones, abordadas por este tema de "creación dinámica de botones de radio", se desconoce el número de controles que necesitará el usuario. Además, no recomiendo ''omitir'' la captura de errores ''try-catch'', ya que esto permite la facilidad de capturar futuras implementaciones de navegadores que pueden no cumplir con los estándares actuales. De estas soluciones, recomiendo usar la solución propuesta por Patrick Wilkes en su respuesta a su propia pregunta.

Esto se repite aquí en un esfuerzo por evitar confusiones:

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

Answer 9

Mi solución:

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

Answer 10

Botón de opción creado dinámicamente en 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>

( fuente )

Answer 11

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

}