Auto select could be achieved in many ways, like using el.click(). Then you need to loop & see if el is 'checked - I've provided both basic example described in your question & more usable example with .checked.
//array of options
var array = new Array();
array[0]="January";
array[1]="February";
array[2]="March";
array[3]="April";
array[4]="May";
array[5]="Juny";
array[6]="July";
array[7]="August";
array[8]="September";
array[9]="October";
array[10]="November";
array[11]="December";
// values to of checkboxes I want to auto-check
var target = new Array();
target[0]="March";
target[1]="September";
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in array) {
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
cb.addEventListener('click',e=>{
if (e.target.value) t.value += e.target.name
})
//alternate version:
//cb.addEventListener('click',updateText)
}
//function updateText(){
// t.value = [null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.name:s||'')
//}
document.querySelector('[name="March"]').click()
document.querySelector('[name="September"]').click()
* {
box-sizing: border-box;
}
#data {
padding:5px;
width:100vw;
}
.multiselect {
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:50px;
}
.checkboxes {
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding:5px;
}
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
<textarea id="t"></textarea>
March and September have to be automitacly checked
Explanation of
[null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.name:s||'')
First, we're taking all checkboxes within id with "querySelectorAll('#checkboxes [type="checkbox"]')"
Next, prepend "..." to treat Node list as Array while forming new array with [ ] (also, adding "null" at index 0 for easier code later)
Then, .reduce( ) to output string, looping each element of array, providing 2 arguments - s - same variable, passed between elements, adding strings to it, and el - each element from array (inpyt checkbox element).
It's es6, so arguments for reduce callback comes before "=>", ald after "=>" there's auto-returned expression.
Inside this expression, there's "if" shorthand - if el is .checked we're adding el.name to "s" (or empty string if we're just beginning), and if el isn't checked - we're just passing "s"(or empty string) further down the loop
Example based on watching target[] changes:
//array of options
var array = new Array();
array[0]="January";
array[1]="February";
array[2]="March";
array[3]="April";
array[4]="May";
array[5]="Juny";
array[6]="July";
array[7]="August";
array[8]="September";
array[9]="October";
array[10]="November";
array[11]="December";
var arrayChangeHandler = {
get: function(target, property) {
return target[property];
},
set: function(target, property, value, receiver) {
target[property] = value;
array.forEach(n=>(target.includes(n) != document.querySelector('[name="'+n+'"]').checked) ? document.querySelector('[name="'+n+'"]').click() : null)
return true;
}
};
var target = new Proxy([], arrayChangeHandler);
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";
var j = "";
var t = document.getElementById('t');
// the loop is creating the checkboxes with name, value...
for (var i in array) {
//Name of checkboxes are their number so I convert the i into a string.
j = i.toString();
val = j;
//cap will be the value/text of array[i]
var cb = document.createElement('input');
var label= document.createElement("label");
cap = array[i];
var text = document.createTextNode(cap);
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = cap;
cb.value = val;
label.appendChild(cb);
label.appendChild(text);
cbh.appendChild(label);
cb.addEventListener('click',updateText)
}
function updateText(){
t.value = [null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.name:s||'')
}
//document.querySelector('[name="March"]').click()
//document.querySelector('[name="September"]').click()
target[0]="March";
target[1]="September";
* {
box-sizing: border-box;
}
#data {
padding:5px;
width:100vw;
}
.multiselect {
overflow: visible;
padding:0;
padding-left:1px;
border:none;
background-color:#eee;
width:100vw;
white-space: normal;
height:50px;
}
.checkboxes {
height:100px;
width:100px;
border:1px solid #000;
background-color:white;
margin-left:-1px;
display:inline-block;
}
label {
display: inline-block;
border: 1px grey solid;
padding:5px;
}
<form>
<div id="data">
<div class="multiselect">
<div id="c_b">
<div id="checkboxes">
</div>
</div>
</div>
</div>
</form>
<textarea id="t"></textarea>
March and September have to be automitacly checked
This example uses kinda new technogy - proxy, so it might not be 100% reliable, and won't work in older browsers, but i guess it's best bet without reactive framework.
