Problem with attribute 'checked' in IE using the DOM

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?


Try using the value attribute like in the following snippet:

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

hope it helps

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.


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

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"; = = "radiotest"; = "idFirstInputRadio"; = "idSecondInputRadio";
	FirstInput.value = "first choice";
	SecondInput.value = "second choice";
else {return};

LabelFirstInput.htmlFor = "idFirstInputRadio";
LabelFirstInput.appendChild(document.createTextNode("First option"));


LabelSecondInput.htmlFor = "idSecondInputRadio";
LabelSecondInput.appendChild(document.createTextNode("Second option"));

source :

then view source

hope it helps

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.


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.

var obj = getObjectRefByID(someID);
var cbx = document.createElement("input");
cbx.type = "checkbox"; = "myCBX";


hope it helps, (this time)

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.

<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"+i; = "tx_tipo";
r.value = arr[i];
var txt = document.createTextNode(arr[i]);
var el = document.getElementById('r0');
el.setAttribute("checked",true); //  or el.setAttribute("checked","checked");
<input type="button" onclick="radyo()" value="add radio">

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.

<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 &lt; largo; i++)
        var etiq = document.createElement('label');
        var tipoRadio = document.createElement('input');
        tipoRadio.type = 'radio'; = nombreEntrada + i; = nombreEntrada;
        tipoRadio.value = arregloRadio[i][0];
        var txt = document.createTextNode(arregloRadio[i][1]);
        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:');
    var celdaVal = fila.insertCell(-1);
    preparaRadio(celdaVal, 'tx_lenguaje', arreglo, arreglo[1][0]);

<input type=“button” onclick=“crearRadio()” value=“add radio”>
<div id=‘mostrarRadio’></div>

<body onload="start()">
<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 :"  );
var myname = ["interna","externa"];
var n, inp;
for(var i = 0; i < 2; i++) {
inp = document.createElement('<input type="radio" name='+myname[i]+' >');
inp = document.createElement("input");
inp.type="radio"; myname[i];

// 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;
inp.checked = n;

Finally, I got it. I have to show the whole table & after that set the default value for the radio elements. Thanks.