Question

我有以下代码，我想根据一组值添加复选框：

当我运行代码时，它会替换复选框而不是添加新代码。

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>';

     }

}

Answer 1

您可以尝试以下代码，

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

}

Answer 2

你可以这样做： -

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;

}

Answer 3

这样你只能获得最后一个复选框 function init（）{

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;

如此连接你的结果，即

{{1}}

根据数组值javascript动态添加复选框

3 个答案: