crear dinámicamente un botón de radio que utiliza por ejemplo¿Cómo se crea dinámicamente un botón de opción en Javascript que funciona en todos los navegadores?
var radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);
funciona en Firefox, pero no en IE. Por qué no?
Basado en este post y sus comentarios: http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
las siguientes obras. 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;
}
Mi sugerencia es no utilizar 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.
Saludos.
respuesta de Patrick trabaja, o se puede establecer el "defaultChecked" atribuir también (esto funcionará en IE para los elementos de radio o casillas de verificación, y no causará errores en otros navegadores.
PS Lista completa de los atributos que se no se puede establecer en el IE está aquí:
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html
Dando un paso de lo que sugiere Patrick, usando un nodo temporal podemos deshacernos de la 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;
}
He aquí un ejemplo de solución más general que detecta IE en la delantera y se ocupa de otros atributos IE también tiene problemas con, extraídos 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 DOMBuilder también maneja el registro de detector de eventos y especificación de los nodos secundarios .
por qué no crear la entrada, establecer el estilo en la pantalla: ninguno y luego cambiar la pantalla cuando sea necesario de esta manera también es probable que pueda manejar usuarios sin mejor js.
Personalmente, yo no crearía nodos yo mismo. Como habrás notado, hay demasiados problemas específicos del navegador. Normalmente uso Builder.node de script.aculo.us. El uso de este código se convertiría en algo como esto:
Builder.node('input', {type: 'radio', name: name})
respuesta rápida a un puesto de más edad:
El post anterior por Roundcrisis está bien, si y sólo si, se conoce el número de controles de radio/casilla que se usará de antemano. 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 la confusión:
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;}
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')
botón de radio creada 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”, “  ”);
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)
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);
}
Bienvenido a stackoverflow. Considera agregar una explicación a tu respuesta. –
enlace Lone está [considera una respuesta pobre] (http://stackoverflow.com/faq#deletion) ya que no tiene sentido por sí mismo y recurso de destino no está garantizada para estar vivo en el futuro. Intente incluir al menos un resumen de la información a la que está enlazando. – j0k
¿Se usa containerDivClientId? – HeyWatchThis