使用jQuery动态创建复选框元素 - 奇怪的IE行为

Question

我正在使用jQuery动态创建一些复选框元素,并将它们附加到这样的节点

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 )
        )
    )
} );

我遇到的问题是双重的(仅在IE中)

• 复选框已添加到页面中,但当我为该值指定"true"时,将取消选中其默认选中状态.(使用'checked'测试值没有区别)
• 当alert( cbox.value );执行时,输出"上",每一次.

我认为这里的核心问题是我需要一种更好的方法来设置复选框的默认选中状态,并设置其默认的"值"属性.但我还没有找到另一种方式.

注意:所有这些代码在Firefox和Chrome中都能正常运行.

这是使用IE 7.0.5730.11进行的jQuery 1.3.1测试

Answer 1

Internet Explorer不希望您更改不属于DOM的输入的选中值.尝试在附加项目后设置选中的值,看看是否有效.