I got some difficulties with one point since 1 week, I have 2 arrays, and I want to auto select checkboxes by retrieving the value inside one of the array.
First of all, I have a loop which create some checkboxes based on the first array choices[].
Every time I check one a checkbox, a text field is updated with a separator. "$#"
I save this text field by my own. But now I have an array with some values as string target[].
I want to auto select checkboxes which has his value inside the array target[]. So if I change a value in target[], and I refresh, the checkbox concerned will be automaticly selected.
Here is a snippet to see how it looks like now. PLease update it to answer.
I would prefer JavaScript but I deseperated so if you have Jquery it would be ok.
//array of options var choices = new Array(); choices[0] = "January"; choices[1] = "February"; choices[2] = "March"; choices[3] = "April"; choices[4] = "May"; choices[5] = "Juny"; choices[6] = "July"; choices[7] = "August"; choices[8] = "September"; choices[9] = "October"; choices[10] = "November"; choices[11] = "December"; var target = new Array() target[0] = "3"; target[1] = "8"; 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 choices) { //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 choices[i] var cb = document.createElement('input'); var label = document.createElement("label"); cap = choices[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.value + '$#' : s || '') }* { 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>