mercredi 31 mai 2017

Auto check checkboxes by retriving their values

I've met some issues by retrieving checkboxes from an array of values.

I tried to auto check the checkboxes which are concerned by an array.

array[i] generate some input of checkboxes target[i] is an array which contains some checkboxe's values. So when I refresh the page, I have to see that "tuesday" and "Wendesday" is already selected. cf.the snippet (I don't know if I explain correctly)

// table which generate checkboxes
                        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";

                // values to of checkboxes I want to auto-check
                        var target = new Array();
                        target[0]="Tuesday";
                        target[1]="Wendesday";


                        var cbh = document.getElementById('checkboxes');
                    var val = '';
                    var cap = "";

                    var j = "";
                        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);
                        }
      
* {
                        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>
    Tuesday and Wendesday have to be automitacly checked

Thank you for your help. Regards




Aucun commentaire:

Enregistrer un commentaire