dynamically add check boxes based upon array value javascript

Question

I have the following code and i would like to add check boxes based upon an array of values:

When i run the code it replaces the check box instead of appending a new one.

HTML

   <span id="foo">


           </span>

Javascript

function init() {

    var values = ["value1", "Value2", "Value3", "Value4"];

     for (i = 0; i < values.length; i++) {
        document.getElementById("foo").innerHTML = '<label><input type="checkbox" value="' + values[i] + '_checkbox">' + values[i] + '</label><br>';

     }

}

Change to: innerHTML += ...

Hunan Rostomyan
– Hunan Rostomyan

2015-12-05 05:34:01 +00:00
Commented Dec 5, 2015 at 5:34 — Hunan Rostomyan
– Hunan Rostomyan, Commented Dec 5, 2015 at 5:34
you tried .append() function?

Harsh Sanghani
– Harsh Sanghani

2015-12-05 05:35:33 +00:00
Commented Dec 5, 2015 at 5:35 — Harsh Sanghani
– Harsh Sanghani, Commented Dec 5, 2015 at 5:35

Aparna_29 · Accepted Answer · 2015-12-05 05:35:06Z

1

You can try following code,

function init() {
    var str =''; //INitial a string
    var values = ["value1", "Value2", "Value3", "Value4"];

     for (i = 0; i < values.length; i++) {
       str +='<label><input type="checkbox" value="' + values[i] + '_checkbox">' + values[i] + '</label><br>'; //Append values in string

     }
document.getElementById("foo").innerHTML = str; //Assign string to element

}

answered Dec 5, 2015 at 5:35

Aparna_29

1212 bronze badges

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

3 Comments

Harsh Sanghani Over a year ago

I think it will replace content.

Harsh Sanghani Over a year ago

Ok, Its my mistake :)

Hunan Rostomyan Over a year ago

I think @HarshSanghani meant that if #foo already has some content, calling init() will replace that content, which your code does. Try calling the function twice (viz. init(); init();). His code preserves the contents, however.

Harsh Sanghani · Accepted Answer · 2015-12-05 05:37:09Z

1

You can do it by these way :-

function init() {
    var str    = document.getElementById("foo").innerHTML;
    var values = ["value1", "Value2", "Value3", "Value4"];

     for (i = 0; i < values.length; i++) {
       str +='<label><input type="checkbox" value="' + values[i] + '_checkbox">' + values[i] + '</label><br>';

     }
document.getElementById("foo").innerHTML = str;

}

answered Dec 5, 2015 at 5:37

Harsh Sanghani

1,7421 gold badge15 silver badges32 bronze badges

Comments

Ajay Makwana · Accepted Answer · 2015-12-05 05:38:33Z

0

By this you get only last check box function init() {

    var values = ["value1", "Value2", "Value3", "Value4"];

     for (i = 0; i < values.length; i++) {
        document.getElementById("foo").innerHTML = '<label><input type="checkbox" value="' + values[i] + '_checkbox">' + values[i] + '</label><br>';

     }

}

So concatenate your result i.e.

for (i = 0; i < values.length; i++) {
      text   += '<label><input type="checkbox" value="' + values[i] + '_checkbox">' + values[i] + '</label><br>';

}
document.getElementById("foo").innerHTML = text;

answered Dec 5, 2015 at 5:38

Ajay Makwana

2,3821 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

dynamically add check boxes based upon array value javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related