How do I properly create and manipulate checkboxes via javascript in Internet Explorer?

Question

Hello,

I'm writing a web app. Based on certain choices the user selects, it dynamically creates a number of checkbox input elements. For the sake of usability, they should be created in a checked state, and the user would uncheck the ones they don't want.

I have the code working fine in Firefox. Unfortunately, I have to target IE 7.0. There, I'm having no luck. Here are the relevant parts.

This creates a checkbox in the DIV box with CboxBlock for the ID.

function InsertCheckBox(name, appfk)
{
   // Create the text box node.
   var tbox = document.createElement('input');

   // Set all the values.
   tbox.type = "checkbox";
   tbox.checked = "checked";
   tbox.name = "cbox";
   tbox.value = appfk;

   // Next, we need a paragraph element to place it in.
   var para = document.createElement('p');

   // Text to place inside P
   para.appendChild(  document.createTextNode(name) );

   // Append text box
   para.appendChild(tbox);

   // Attach to the CboxBlock
   block = document.getElementById("CboxBlock");
   block.appendChild( para );

}

In Firefox, this works right off the bat. The checkboxes are checked. In IE, they are not. So I added another function to fire after creation:

function SetCheckboxes()
{
   block = document.getElementById("CboxBlock")
   //cboxes = document.getElementsByName("cbox");

   cboxes = block.childNodes;

   for (ind in cboxes)
   {
      box = cboxes[ind];
      box.checked = "checked";

   }
}

I found the stupid bug where getElementsByName wasn't returning anything, but this still changes nothing. The text boxes are unchanged. I even tried changing it to box.checked = true, like I've seen in a few places, but that still didn't change it.

Can anyone see where I might be making a mistake? Is there some other way I'm supposed to manipulate checkboxes in IE? Thanks for any info you can provide.

Answer 1

I believe IE accesses it as an attribute, not a property.

box.setAttribute('checked', 'checked');