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.)

8 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.

  5. Marco says:

    “Set the defaultChecked attribute to true prior to adding the node to the DOM!” – your first advice didn’t work in my case, but this one was spot on! IE6 and IE7 bow to your superior knowledge. Thank you very much!!! Marco

  6. Luke Rocco says:

    Just to let you guys know, this problem still persists in IE 8… haven’t tried IE 9 though…

  7. Olli says:

    Thanks, attaching the checkbox to parent element and then setting the checked-property worked for me.

  8. Olli says:

    Sorry, I was too fast. In IE6 I needed also the defaultChecked-property.

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>