create and populate with DOM a checkbox list with array values in javascript

Question

I have an array of animals ... how do I manage to create a checkbox list in javascript and fill each with a name of the animals who are in animals array and display them in html. My my attempt code:

var lengthArrayAnimals = animals.length;
for (var i= 0; pos < tamanhoArrayDiagnosticos; pos++) {
    var checkBox = document.createElement("input");
    checkBox.setAttribute("type", "checkbox");
    checkBox.name = diagnosticos[i];
}

You have to append the checkBox to the DOM

tymeJV
– tymeJV

2015-02-23 16:17:58 +00:00
Commented Feb 23, 2015 at 16:17 — tymeJV
– tymeJV, Commented Feb 23, 2015 at 16:17

Michael Dziedzic · Accepted Answer · 2015-02-23 16:27:48Z

8

Here's one way (pure JavaScript, no jQuery):

var animals = ["lion", "tigers", "bears", "squirrels"];

var myDiv = document.getElementById("cboxes");

for (var i = 0; i < animals.length; i++) {
    var checkBox = document.createElement("input");
    var label = document.createElement("label");
    checkBox.type = "checkbox";
    checkBox.value = animals[i];
    myDiv.appendChild(checkBox);
    myDiv.appendChild(label);
    label.appendChild(document.createTextNode(animals[i]));
}

https://jsfiddle.net/lemoncurry/5brxz3mk/

answered Feb 23, 2015 at 16:27

Michael Dziedzic

5436 silver badges9 bronze badges

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

1 Comment

backnext Over a year ago

super. This helps a lot.

roshan · Accepted Answer · 2015-02-23 16:21:19Z

5

I hope this is what you expected.

$(document).ready(function(){
var animals=["cat","dog","pikachu","charmaner"];

$.each(animals,function(index,value){
	var checkbox="<label for="+value+">"+value+"</label><input type='checkbox' id="+value+" value="+value+" name="+value+">"
	$(".checkBoxContainer").append($(checkbox));
})

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkBoxContainer"></div>

answered Feb 23, 2015 at 16:21

roshan

2,5502 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

create and populate with DOM a checkbox list with array values in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related