基于数组值javascript动态添加复选框

dynamically add check boxes based upon array value javascript

本文关键字：javascript 动态 添加 复选框 于数组 数组      更新时间：2023-09-26

我有以下代码，我想添加基于值数组的复选框：

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

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

您可以尝试以下代码，

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
}

您可以通过以下方式完成：-

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

通过此操作，您只得到最后一个复选框函数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>';
     }
}

因此，连接您的结果，即

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;
相关文章：