6131 Views // 0 Comments // Not Rated

Radio Button Bug In IE 6

Radio buttons are kind of annoying. They always seem to have some little quark about them that doesn't quite seem to get us all the way there. Besides, they are gratuitous: if you need a single selection from several options, you can use a dropdown; if there are only two options, you can use a checkbox. (Checkboxes are more "natural" anyways, since you see these on paper forms all the time. Radio buttons always make me think of standardized tests.)

In any project I've been on, radio buttons have always needed to be shoved a bit to do what we needed. Once we needed the ability to have a radio button list that allowed you to clear the selection by clicking the selected radio button. A few times radio button lists have taken up too much real estate on the form. In InfoPath, they just a pain in general.

Another problem I've found with them on the web side of things is a little bug in IE. (This is definitely a bug in IE 6; I have not confirmed in IE 7 since my client fears tabbed browsing.) The problem is with the dynamic generation of radio buttons using JavaScript and document.createElement() to birth controls.

An article that describes the basic problem and a decent work around can be found here.

Setting "type" and "name" explicitly (like you do with any other input control) doesn't generate any runtime errors; it simply does nothing. In fact, it appears as though setting the innerHTML of control that will contain a radio button is suspect. For example, here's something I tried:

Code Listing 1

  1. var cell = document.createElement('td');
  2. cell.innerHTML = '<input type=\"radio\" id="\rbid\" value=\"test\" name=\"rbname\"';
  3. alert(cell.innerHTML);
  4. cell.innerHTML = cell.innerHTML + '><span style=\"font-weight: bold;\">test</span>';
  5. alert(cell.innerHTML);

The first alert box was blank, and the second one was, given the first one was blank, correct! It's like IE knows about its own issue here, and works itself around it! So, I used the technique from the aforementioned link and was able to move on with my life...for about seven minutes.

Next, I noticed the same shenanigans with the checked property. I tried all of the following, but was unable to get the damn thing to check itself:

  • radioButtonReference.checked = true;
  • radioButtonReference.setAttribute('checked', 'checked');
  • radioButtonReference.innerHTML = radioButtonReference.innerHTML + 'checked=\"checked\"'; (making sure the whole input tag was correct).

Luckily, despite all of these standard, intuitive values not working, an HTML attribute I never heard of turned out to be the answer: defaultChecked. Set this to true and the radio button will be radioed. Then when you read the checked property, it'll be correct. And it's not the HTML itself that IE pukes on. When I tried the above attempts, no additional markup was even generated. So given the markup that was created, the browser was displaying correctly. It's just like IE6 wants nothing to do with dynamic radio buttons created from JavaScript!

No Tags

No Files

No Thoughts

Your Thoughts?

You need to login with Twitter to share a Thought on this post.