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