lundi 29 mai 2017

Creation Dynamic checkboxes Javascript

I've got an issue that I don't understand.

I'm creating a "generator" of checkboxes based on an array.

                        var array = new Array();
                        array[0]="Monday";
                        array[1]="Tuesday";
                        array[2]="Wendesday";
                        array[3]="Thirsday";
                        array[4]="Friday";
                        array[5]="Saturday";
                        array[6]="Sunday";

                        var cbh = document.getElementById('checkboxes');
                    var val = '';
                    var cap = '';
                    var cb = document.createElement('input');

                    var j = "";
                        for (var i in array) {
                                //Name of checkboxes are their number so I convert the i into a string. 
                                j = i.toString();
                                console.log('J = ', j);
                                val = j;
                                //cap will be the value/text of array[i]
                                cap = array[i];
                                console.log('cap =', cap);


                            cb.type = 'checkbox';
                            cbh.appendChild(cb);
                            cb.name = val;
                            cb.value = cap;
                            cbh.appendChild(document.createTextNode(cap));
                        }
                      * {
                        box-sizing: border-box;
                        }
                        #data {
                            padding:0;
                                width:100vw;
                        }
                        .multiselect {
                                overflow: visible;
                                padding:0;
                                padding-left:1px;
                                border:none;
                                background-color:#eee;
                                width:100vw;
                                white-space: normal;
                                height:200px;
                        }
                        .checkboxes {
                                height:100px;
                                width:100px;
                                border:1px solid #000;
                                background-color:white;
                                margin-left:-1px;
                                display:inline-block;
                        }
                </style>
<form>
                        <div id="data">
                                <div class="multiselect">
                                         <div id="checkboxes">
                                        </div>
                                </div>
                        </div>
                </form>
(the CSS is not important for my problem... I think)

The problem is that it creates only one checkboxe, for the last element and I don't understand why... I would like a checkboxe for each day.

After that I'm asking how to retrieve the element select, but this is in a second part.

So If someone has an idea, I would be thanksfull !

regards.




Aucun commentaire:

Enregistrer un commentaire