Simple JS function in order to set a list of checked boxes in a form does not work

so i'm i'm using basic JS and PHP to write a form. In a that form i have several checkboxes in which the user can click to add it to his object.

<div class="input-group input-group-sm">
     <span class="input-group-addon">Tube(s) : </span>
     <input id="tube" name="tube" type="text" class="form-control" placeholder="ex :TH2132A" style="display:none" required>
</div>
<div style="max-height:150px;overflow:auto;margin:5px;border: 1px solid;">
     <table class="table table-striped" >
       '.$this->tabTubeModif().'
     </table>
</div>

As u see i'm calling a function in order to build the table that contains all my checkboxes. This function checks the related object attributes in order to render the correct information in the form.

public function tabTubeModif($outil){
    $tubes=type::findAll();
    $res='';
    foreach ($tubes as $tube){
        if (in_array(str_replace(" ","-",$tube->__get("nom")),explode("/",$outil->__get("liste_tubes")))){
            $res .= '<tr><td>' . str_replace(" ", "-", $tube->__get("nom")) . '</td><td><input type="checkbox" id="' . str_replace(" ", "-", $tube->__get("nom")) . '" onchange=editListTube("' . str_replace(" ", "-", $tube->__get("nom")) . '") value="'. str_replace(" ", "-", $tube->__get("nom")) . '" checked="checked" </td></tr>';
        }
        else{
            $res .= '<tr><td>' . str_replace(" ", "-", $tube->__get("nom")) . '</td><td><input type="checkbox" id="' . str_replace(" ", "-", $tube->__get("nom")) . '" onchange=editListTube("' . str_replace(" ", "-", $tube->__get("nom")) . '") value="' . str_replace(" ", "-", $tube->__get("nom")) . '" </td></tr>';
        }
    }
    return $res;
}

And onchange of the checkbox i'm calling a js function :

function editListTube(id_check){
alert(document.getElementById("tube").value)

var vale="#"+id_check;


if (document.getElementById(id_check).checked){
    alert(vale+'CHECK2');
    if ( document.getElementById("tube").value==''){
        document.getElementById("tube").value+=id_check;
    }
    else{
        document.getElementById("tube").value+='/'+id_check;
    }
}

else{
    alert(document.getElementById("tube").value)
    alert(vale+'UNCHECK2');

    var val='';
    var vals = document.getElementById("tube").value.split('/');

    for (var i=0; i<vals.length;i++){
        if (vals[i]==document.getElementById(id_check).value){
            vals.splice(i, 1);
        }
    }
    for (var j=0; j<vals.length;j++) {
        if (j==vals.length-1){
            val+=vals[j];
        }
        else{
            val+=vals[j]+'/'
        }
    }
    document.getElementById("tube").value=val;
}

}

Basically it is just suppose to add/remove the corresponding string from the hidden text input "tube". But i have 2 problems.

First as you see i set up some alerts in my js function to see in which part of the code i am, and it seems that when the checkbox is checked when the form loads, weather i check or uncheck i always pass by the "uncheck" part of the code...I believe this is due to (in TabTubeModif) the way i check them "checked="checked"" but i can't think of another way to do it.

2nd problem comes on alert(document.getElementById("tube").value) returns empty, when on the page and in the genrated html code it definitely has a value :

So just to sum up my problem : If a box is checked on the load of form, i uncheck it once, i pass by the good part of my code but the "#tube" field is not updated cause it's value seems empty (when its not in fact). And if i try try to re-check that same box, it goes in the uncheck part of the js code...

Any help appreciated !