Creating checkbox elements on the fly with jQuery - odd IE behavior

Question

I'm creating some checkbox elements on the fly with jQuery and appending them to a node like so

var topics = ['All','Cat1','Cat2'];
var topicContainer = $('ul#someElementId');

$.each( topics, function( iteration, item )
{
    topicContainer.append(
        $(document.createElement("li"))
        .append(
            $(document.createElement("input")).attr({
                 id:    'topicFilter-' + item
                ,name:  item
                ,value: item
                ,type:  'checkbox'
                ,checked:true
            })
            .click( function( event )
            {
                var cbox = $(this)[0];
                alert( cbox.value );
            } )
        )
        .append(
            $(document.createElement('label')).attr({
                'for':  'topicFilter' + '-' + item
            })
            .text( item )
        )
    )
} );

The problems I'm encountering are two-fold (there are in IE only)

• Checkboxes are added to the page, but their default checked state is unchecked, when I'm specifying 'true' for that value. (Testing with 'checked' for the value makes no difference)
• When alert( cbox.value ); executes, the output is 'on', every time.

I think the core problem here is I need a better way to set the default checked state of the checkboxes, and to set their default "value" attribute. But I haven't yet found another way.

Note: all of this code works fine in Firefox and Chrome.

This is jQuery 1.3.1 testing with IE 7.0.5730.11

Answer 1

Internet Explorer doesn't like to let you change the checked value of an input that is not a part of the DOM. Try setting the checked value AFTER the item has been appended and see if that works.

Answer 2

I reused some of your code and had a similar problem as per

Why does order of defining attributes for a dynamically created checkbox in jquery affect its value?

I found the resolution was to simply move the attribute declaration

type:  'checkbox', 

to the beginning i.e:

$(document.createElement("input")).attr({
type:  'checkbox', 

This problem occured in all browsers for me so i dont think its an IE issue but rather a jquery "thing". For me it didnt matter when i set the value (before or after) append. The difference was in how soon/where i declared the type of the input.

Answer 3

A checked checkbox's "checked" attribute does not have a state of true, it has a state of string "checked". I usually add elements to DOM with jQuery using:

var el = $('<input type="checkbox" id="topicFilter-' + '"'
         + ' checked="checked" />');
$(topicContainer).append(el);

More legible anyway, IMO, reads like HTML. I'll be damned if it doesn't work in IE, too, I've been doing it this way for years.