使用javascript创建并填充带有数组值的复选框列表

时间:2015-02-23 16:08:36

标签: javascript html arrays

我有一系列动物......我如何设法在javascript中创建一个复选框列表,并用动物阵列中的动物名称填充每个动物,并以html格式显示它们。 我的尝试代码:

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

2 个答案:

答案 0 :(得分:5)

我希望这是你所期望的。

&#13;
&#13;
$(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));
})

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkBoxContainer"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

这是一种方式(纯JavaScript,没有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/