Jquery foreach function

Question

Im trying to foreach array and assign the array data into each checkbox, I found out Jquery have a each function able to do that. Bellow jsfiddle is what Im tried so far. But I not sure why it only came out 1 checkbox ,should be 4 checkbox with correct value, anyone can help me check my code ? what mistake that I have made , Thanks so much .

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

Can you please add your code to your question? Not only on jsfiddle. — progsource
– progsource, Commented Dec 29, 2014 at 7:13

Domain · Accepted Answer · 2014-12-29 07:16:16Z

1

Your code is overwriting the the div content instead of appending.

Replace

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

with following line

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

answered Dec 29, 2014 at 7:16

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

FeelRightz Over a year ago

i tired this also before ... it loop twice from the array ... become 8 checkbox each repeat twice

FeelRightz Over a year ago

and whole div = "fruit" is been loop also ... but i only need the checkbox to be create

Domain Over a year ago

It is looping twice because render() function is called twice. Comment last line PG.render(); As render function is getting called automatically inside init(), there is no need of calling render() function

FeelRightz Over a year ago

ok thanks for the render mistake ... but the result is still not what Im looking for ... the div = "fruit" looped also ... it mean each checkbox are not in the same group

FeelRightz Over a year ago

but your way is correct ! another problem i will fix myself thanks u

|

TSKSwamy · Accepted Answer · 2014-12-29 07:22:26Z

1

Required two changes:

1.Change the $("#"+PG.divid).html(fruit); to $("#"+PG.divid).append(fruit);

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

Updated Fiddle

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

answered Dec 29, 2014 at 7:22

TSKSwamy

2254 silver badges22 bronze badges

Collectives™ on Stack Overflow

Jquery foreach function

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related