使用 JavaScript 创建多个复选框

Question

我想用 JavaScript 创建多个复选框。我尝试了以下方法：

var response= data;
        var container = document.createElement('div');
        var checkboxContainer = document.createElement('div');
        checkboxContainer.setAttribute('class', 'checkbox');
        var label;
        var checkBox;

        for(i=0;i<response.length;i++){
            label = document.createElement('label');
            checkBox = document.createElement('input');
            checkBox.type = "checkbox";
            checkBox.name = "selDates[]";
            checkBox.value = response[i]['date'];

            label.innerHTML = response[i]['date'] + " " + response[i]['typ'];
            label.appendChild(checkBox);

            checkboxContainer.appendChild(label);
            container.appendChild(checkboxContainer);
        }
        $("#downloadContent").prepend(container);

正如我在 chrome 开发者工具中看到的，它创建了我所有的复选框，但只显示一个。显示所有标签。

如您所见，一个复选框与所有 (3) 个标签一起显示。

在这里您可以看到代码的打印屏幕。

为什么只显示一个复选框？供您参考，我使用 Bootstrap 3 和 jQuery。

感谢您的帮助！

亚尼克

Answer 1

Javascript 似乎没问题（除了可能每次在循环中添加checkboxContainer）。

一种可能性是 CSS 使其他复选框不可见。

例如，labels 的样式可以用position:absolute 定义（因此它们都是可见的，但一个在另一个之上），或者display:none 除了一个...

如果没有最小的可重现示例，很难确定。