Question

我试图foreach数组并将数组数据分配到每个复选框中，我发现Jquery有一个each函数能够做到这一点。 Bellow jsfiddle是我到目前为止所尝试的。但我不确定为什么它只出现1个复选框，应该是4个正确值的复选框，任何人都可以帮我检查我的代码？我犯了什么错误，非常感谢。

JS Fiddle

HTML

 <div id="popupfoot"></div>

JS

    var PG = {
    divid:"",
    multiselection:"",
    optionitem:[],        
    init:function(divid,multiselection,optionitem){
       PG.divid = divid;
       PG.multiselect = multiselection;
       PG.optionitem = optionitem;
       PG.render();
    },
    test:function(){
        for(var i =0; PG.optionitem.length > i ; i++){
            alert(PG.optionitem[i].name);
        }
    },
    render:function(){
/*      for(var i =0; PG.optionitem.length > i ; i++){*/

        $.each(array, function(i,obj) {
        var fruit = "<div class='fruit'>" +
                        "<input class='the_checkbox' type='checkbox' id="+obj.value+" name="+obj.name+" value="+obj.value+">" +
                        "<label class='label' for="+obj.value+">"+obj.value+"</label>" +
                      "</div>";


                    $("#"+PG.divid).html(fruit);
                    $('.the_checkbox').on('change', function(evt) {
                       if($(this).siblings(':checked').length >= PG.multiselect) {
                           this.checked = false;
                       }
                    });           
        });
/*      }*/



    },
    save:function(){
    }
}


var array = [];
array[0] = {"name":"fruit","value":"mango"};
array[1] = {"name":"fruit","value":"apple"};
array[2] = {"name":"fruit","value":"orange"};
array[3] = {"name":"fruit","value":"banana"};

PG.init("popupfoot", "1", array);
PG.render();

Answer 1

您的代码会覆盖div内容而不是附加。

替换

$("#"+PG.divid).html(fruit);

以下行

$("#"+PG.divid).append(fruit);

Answer 2

需要进行两项更改：

1.将$("#"+PG.divid).html(fruit);更改为$("#"+PG.divid).append(fruit);

2. //PG.render(); // as you are already calling it in init;

更新小提琴

http://jsfiddle.net/1wskk51m/2/

Jquery foreach函数

2 个答案: