CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcheckbox
Yanick Schraner
Yanick Schraner

Reputation: 315

Create multiple Checkboxes with JavaScript

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.

enter image description here

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

enter image description here

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

Upvotes: 2

Views: 2612

Answers (1)

6502
6502

Reputation: 114609

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 labels 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.

Upvotes: 1

Related Questions