vendredi 2 juin 2017

Auto Select checkboxes by compairing two array() JavaScript

I got some issues. I have a section with checkboxes that a personne can check or not. If a checkbox is cheched, the value is sent to a text field, and I store this text.

When the user retuns on the page, the textfield is already completed by the values checked. But the checkboxes are unchecked. So I would like to automatically check thoses checkboxes in JavaScript.

So I got 2 array with one which is the options and the other which is the options selected. And I would like to automaticly check the checkboxes according to the array target[].

I need to use JavaScript and no Jquery. So here is a template of my code.

//array of options
//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 target = new Array();
target[0]="April";
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',updateText)
}

function updateText(){
  t.value = [null,...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s,el)=>el&&el.checked?s=(s||'')+el.value+'$#':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:200px;
                        }
                        .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;
                        }
            <a onclick="All();">All</a> | <a onclick="Selected();"> Selected</a>
                <form>
                        <div id="data">
                                <div class="multiselect">
                                        <div id="c_b"> <!-- Nous sert à réccupérer les valeurs des checkboxes selectionnés -->
                                                <div id="checkboxes"> <!-- Nous sert à créer dynamiquement les différentes checkboxes -->
                                                </div>
                                        </div>
                                </div>
                        </div>
                </form>

                <textarea id="t"></textarea>

I added this snipet if you can edit it to show me how to proceed, it would be perfect.

Thank you !




Aucun commentaire:

Enregistrer un commentaire