Aug 06

Stupid IE 6 Bug #182478: Check boxes added through Javascript aren’t checked

Tag: dom,html,ie,javascript,prototype,webpmularien @ 9:44 pm

Straightforward explanation and solution of the IE checkbox bug here.

Just ran into this goofy issue recently. So, if you set the ‘checked’ attribute on a checkbox before it’s part of the DOM, in IE 6, the checkbox will not actually be checked. Brilliant!

Solution:

  • Set the checked attribute after adding the node to the DOM
  • Set the defaultChecked attribute to true prior to adding the node to the DOM

An example of this with Prototype (using solution #2, above) is:

        anElem.appendChild(new Element("input", 
                {'type':'checkbox','name':'mycb','checked':'checked','defaultChecked':'true'}));

Don’t forget to keep the ‘checked’ attribute in there so it works with other (good) browsers!

(For the overly literal among you, that isn’t really a bug number, it’s sarcasm.)

Similar Posts:

4 Responses to “Stupid IE 6 Bug #182478: Check boxes added through Javascript aren’t checked”

  1. Michelle says:

    This bug (299) is tracked over at Web Bug track
    http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html

    It is just one of dozens of IE bugs wrapped up in bug 244
    http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

    It should be noted that your bug affects radio buttons too, and also affects both when cloning nodes in the DOM. (they’ll become unchecked)

  2. fwolle says:

    you can set the checkbox as checked, after the append.

    anElem.appendChild(var e=new Element("input", 
                    {'type':'checkbox','name':'mycb','checked':'checked','defaultChecked':'true'}));
            e.checked=true;
  3. fwolle says:

    oops, please remove my last post

  4. Matt says:

    Thanks for the post! I’ve been struggling with IE6 and checkboxes for ages.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">