Dynamically created radio inputs don't check in IE7

Question

I came across a weird IE-specific error. It seems that when creating radio inputs with document.createElement, the resulting widgets do not respond to clicks. They grey out for a second when you click on them, but they do not become checked. It works as expected in FF3, but not in IE7. Any idea what's up with this?

<html>
<body>
    <form>
        <div id="foo">
        </div>
    </form>

    <script>
        var foo = document.getElementById('foo');

        var t = document.createElement('input');
        t.type='radio';
        t.name ='fool';

        var f = document.createElement('input');
        f.type='radio';
        f.name ='fool';

        foo.appendChild(t);
        foo.appendChild(f);

    </script>
</body>
</html>

Duplicate of http://stackoverflow.com/questions/118693/how-do-you-dynamically-create-a-radio-button-in-javascript-that-works-in-all-brow/119079 — Jacob Mattison, Jun 25 '09 at 18:47

score 6 · Answer 1 · answered Jun 25 '09 at 18:45

For some reason, creating radio buttons like this in IE, doesn't work.

A solution that seems to work (according to the article found here) is to do:

var r;
try {
  // This works in IE
  r = document.createElement('<input type="radio" name="foo1"/>');
} catch( err ) {
  // For everyone else
  r = document.createElement('input');
}
r.setAttribute('type', 'radio'); 
r.setAttribute('name', 'foo1');

Dynamically created radio inputs don't check in IE7

1 Answers1