js 生成input, 显示不出来文字

Question

js函数生成了一个多选框组，但是文字都显示不出来。
<div id="product-radio-wrapper"></div>
<script>
createCheckbox(document.getElementById('product-radio-wrapper'),['手机','笔记本','智能音箱'],'product');
function createCheckbox(id,arr,name) {

var len = arr.length,
    i,
    label;
for (i = 0 ;i < len;i++) {
    var cbox = document.createElement('input'),
        label = document.createElement('label');
    cbox.type = 'checkbox';
    cbox.value = arr[i];
    cbox.name = name;
    cbox.innerHTML = arr[i];
    label.appendChild(cbox);
    id.appendChild(label);
}

}
</script>
显示如下：

Answer 1

复选框的 value 属性值不会显示在用户界面中 你得自己再弄一个标签给用户看

Answer 2

动态插入checkbox测试

createCheckbox(document.getElementById('product-radio-wrapper'),['手机','笔记本','智能音箱'],'product');
    function createCheckbox(id,arr,name) {
        var len = arr.length,
            i,
            label;
        for (i = 0 ;i < len;i++) {
            var div = document.createElement('div');
            var cbox = document.createElement('input');
            var label = document.createElement('label');
            label.innerText = arr[i];
            cbox.type = 'checkbox';
            cbox.value = arr[i];
            cbox.name = name;
            cbox.innerHTML = arr[i];
            div.appendChild(label);
            div.appendChild(cbox);
            id.appendChild(div);
        }
    }

Answer 3

cbox 改成 label