javascript - 使用 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 使其他复选框不可见。

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

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