代码之家  ›  专栏  ›  技术社区  ›  Peter Bailey

使用jquery-odd ie行为动态创建复选框元素

  •  5
  • Peter Bailey  · 技术社区  · 17 年前

    我正在用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”时,它们的默认选中状态将被取消选中。(使用“已检查”的值进行测试没有区别)
    • 什么时候? alert( cbox.value ); 每次执行时,输出为“开”。

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

    注意:所有这些代码在Firefox和Chrome中都可以正常工作。

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

    3 回复  |  直到 11 年前
        1
  •  14
  •   Adam Raney    17 年前

    Internet Explorer不允许您更改不是DOM一部分的输入的选中值。在附加项之后尝试设置选中的值,看看是否有效。

        2
  •  2
  •   Community Mohan Dere    8 年前

    我重用了您的一些代码,并遇到了类似的问题

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

    我发现解决方法是简单地移动属性声明

    type:  'checkbox', 
    

    从一开始,即:

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

    这个问题在我所有的浏览器中都出现了,所以我认为它不是IE问题,而是JQuery的“问题”。对我来说,当我设置值(在追加之前或之后)时并不重要。不同之处在于我声明输入类型的时间/地点。

        3
  •  1
  •   Jon Davis Glenn Block    14 年前

    选中复选框的“checked”属性没有“true”状态,它的状态为字符串“checked”。我通常使用jquery向dom添加元素,方法是:

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

    无论如何,我觉得读起来像HTML。如果它在IE中也不起作用,我会被诅咒的,我这么做已经很多年了。