使用JavaScript创建多个复选框

Question

I want to create multiple checkboxes with JavaScript. I tried the following:

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

As I can see in the chrome developer tools it creates all my checkboxes, but only display one. All labels are displayed.

As you can see, one checkbox is displayed with all (3) labels.

Here you can see a print screen of the code.

Why is there just one checkbox displayed? For your information, I use Bootstrap 3 and jQuery.

Thanks for your help!

Yanick

Answer 1

The Javascript seems ok (except may be for adding checkboxContainer every time in the loop).

One possibility is that CSS makes the other checkboxes not visible.

For example the style for those label s could be defined with position:absolute (thus all of them are visible, but one above the other), or display:none except for one...

Hard to tell for sure without a minimal reproducible example.