Problem with attribute 'checked' in IE using the DOM

**pacctono** · Jun 25, 2007 12:59

I have a function to create a radio input element, using the DOM. I passed to it four parameters: parent_node, name, array ([[value0, display0], [value0, display0], [value0, display0], ...]), defaultValue. It works OK with FF and almost with IE 6. The problem is that it is not taken the 'checked' attribute for the default value in IE; I changed the line to the commented one and did not work either. Even I thought that when no default value is given, the explorer will take the first one, but IE is not taken it.

preparaRadio: function (nodoPadre, nombreEntrada, arregloRadio, valPredeterminado)
{
for (var i=0, len=arregloRadio.length; i < len; i++)
{
var radio = ...
...
if (valPredeterminado == arregloRadio[i][0]) radio.setAttribute('checked', true);
// if (valPredeterminado == arregloRadio[i][0]) radio.checked = true;
...
}
}

Is there anyone with any help, please?

**bustacapinya** · Jun 25, 2007 13:17

Hi,

Try using the value attribute like in the following snippet:

Code:

if(form.elements[i].type == 'radio') {
    			if(form.elements[i].checked) {
    				str += form.elements[i].name + "=" + form.elements[i].value + "&";
    			}
    		}

hope it helps

**pacctono** · Jun 25, 2007 13:58

The problem is that I do not have the radio element, I do not have a form. I am creating the radio element with the DOM and I want to put the checked attribute on the right element.

**bustacapinya** · Jun 25, 2007 14:43

Hi,

Are u using IE6 because I dont think it supports DOM insertion of radio buttons.
I found this workaround:

Code:

function DynamicallyCreate2RadioButtons()
{
var LabelFirstInput = document.createElement("label");
var LabelSecondInput = document.createElement("label");
if(document.all && !window.opera && document.createElement)
/*
MSIE 6 for windows does not support DOM-insertion of radio buttons. The following code works around that lack of support.
*/
	{
	var FirstInput = document.createElement("<input type='radio' name='radiotest' id='idFirstInputRadio' value='first choice'>");
	var SecondInput = document.createElement("<input type='radio' name='radiotest' id='idSecondInputRadio' value='second choice'>");
	}
else if(document.createElement && document.createTextNode)
	{
	var FirstInput = document.createElement("input");
	var SecondInput = document.createElement("input");
	FirstInput.type = SecondInput.type = "radio";
	FirstInput.name = SecondInput.name = "radiotest";
	FirstInput.id = "idFirstInputRadio";
	SecondInput.id = "idSecondInputRadio";
	FirstInput.value = "first choice";
	SecondInput.value = "second choice";
	}
else {return};

LabelFirstInput.appendChild(FirstInput);
LabelFirstInput.htmlFor = "idFirstInputRadio";
LabelFirstInput.appendChild(document.createTextNode("First option"));
document.forms[0].childNodes[0].appendChild(LabelFirstInput);

document.forms[0].childNodes[0].appendChild(document.createElement("br"));

LabelSecondInput.appendChild(SecondInput);
LabelSecondInput.htmlFor = "idSecondInputRadio";
LabelSecondInput.appendChild(document.createTextNode("Second option"));
document.forms[0].childNodes[0].appendChild(LabelSecondInput);
}

source :

http://gtalbot.org/DHTMLSection/Dyna...ioButtons.html

then view source

hope it helps

**pacctono** · Jun 25, 2007 15:05

Well, the IE, I am using, is supporting it. As I said before, in IE it is almost OK, the only problem is with the 'checked' attribute.

**bustacapinya** · Jun 26, 2007 02:42

Hi,

Ok, I am aware that the order of statements is important, IE doesnt care what you do to a checbox/radio before it is inserted, so if you set the checked attribute before it was inserted it will appear unchecked even though a debug statement might say "checked/true", Also the type must be specified, before append. Try and set the checked attribute after it has been inserted.

Code:

var obj = getObjectRefByID(someID); 
var cbx = document.createElement("input"); 
cbx.type = "checkbox"; 
cbx.id = "myCBX"; 
obj.appendChild(cbx); 
cbx.setAttribute("checked","checked");

more:
http://cf-bill.blogspot.com/2006/02/dom-gotchas.html

hope it helps, (this time)

**pacctono** · Jun 26, 2007 18:35

I read the reference article. I put the 'radio.setAttribute("checked", "checked");' as the last command of the function, but still did not work. I put an alert after that and I got:

<input checked="checked" id="tx_tipo0" value="Interna" name="tx_tipo" type="radio">Interna<input id="tx_tipo1" value="Externa" name="tx_tipo" type="radio">Externa

But still, I do not get the the first radio (Interna) checked in IE.

**muazzez** · Jun 27, 2007 06:05

Code:

 
<body>
<script type="text/javascript">

function radyo() {
var arr = ["interna", "externa"]
for(var i = 0; i<2; i++){
var lab = document.createElement('label');

var r = document.createElement('input');
r.type="radio";
r.id="r"+i;
r.name = "tx_tipo";
r.value = arr[i];
lab.appendChild(r);
var txt = document.createTextNode(arr[i]);
lab.appendChild(txt);
document.body.appendChild(lab);
}
var el = document.getElementById('r0');
el.setAttribute("checked",true); //  or el.setAttribute("checked","checked");
alert(document.body.innerHTML);
//alert(el.name);
}
</script>
<input type="button" onclick="radyo()" value="add radio">

**pacctono** · Jun 28, 2007 18:59

Thanks muazzez, I run your script and I got what I supposed. I tried it in my code, now I know what is the problem, but I do not know how to solve, maybe you or somebody could help

The problem is that I am trying to append the input (type 'radio') elements to a cell. When I append those elements to a div element, no problem. This code does not work, but it works if I change the parent node (nodoPadre) from 'celdaVal' to 'mostrarRadio' at the end of the function crearRadio() getting the new line:

preparaRadio(mostrarRadio, 'tx_lenguaje', arreglo, arreglo[1][0]);

It always work in FF < 1.5, but IE.

<html>
<head><TITLE>Prueba de radio para IE</TITLE>
<script type="text/javascript">

function preparaRadio(nodoPadre, nombreEntrada, arregloRadio, valPredeterminado)
{
var el = null;
for (var i=0, largo=arregloRadio.length; i < largo; i++)
{
var etiq = document.createElement('label');
var tipoRadio = document.createElement('input');
tipoRadio.type = 'radio';
tipoRadio.id = nombreEntrada + i;
tipoRadio.name = nombreEntrada;
tipoRadio.value = arregloRadio[i][0];
etiq.appendChild(tipoRadio);
var txt = document.createTextNode(arregloRadio[i][1]);
etiq.appendChild(txt);
nodoPadre.appendChild(etiq);
if (valPredeterminado == arregloRadio[i][0]) el = tipoRadio;
}
if (el) el.setAttribute("checked", true);
alert (nodoPadre.innerHTML);
}

function crearRadio()
{
var mostrarRadio = document.getElementById('mostrarRadio');
var arreglo = [['JavaScript', 'JavaScript'], ['PHP', 'PHP']];
var laTabla = document.createElement("table");
var fila = laTabla.insertRow(-1);
var celdaTit = fila.insertCell(-1);
var txt = document.createTextNode('LENGUAJE:');
celdaTit.appendChild(txt);
var celdaVal = fila.insertCell(-1);
preparaRadio(celdaVal, 'tx_lenguaje', arreglo, arreglo[1][0]);
mostrarRadio.appendChild(laTabla);
}
</script>
</head>
<body>
<input type="button" onclick="crearRadio()" value="add radio">
<div id='mostrarRadio'></div>
</body>
</html>

**muazzez** · Jun 29, 2007 12:08

Code:

  
<html>
<body onload="start()">
</body>
<script type="text/javascript">
function start() {
var body =document.getElementsByTagName("body")[0];
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
var txt = document.createTextNode("cell :"  );
    td.appendChild(txt);
var myname = ["interna","externa"];
var n, inp;
for(var i = 0; i < 2; i++) {
       
try
{
inp = document.createElement('<input type="radio" name='+myname[i]+' >');
}
catch(e)
{
inp = document.createElement("input");
inp.type="radio";
inp.name= myname[i];
}

td.appendChild(inp);  
// n = (i&#37;2 ==0)? null : "checked"; // ie, ff, opera
// n = (i%2 ==0)? false : true;  // ie, ff, opera
n = (i%2 ==0)? false : true;
               
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
body.appendChild(table);
inp.checked = n;
//alert(document.body.innerHTML);
} 
alert(document.body.innerHTML);
}  
</script>
</html>