javascript - 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 , php write form. in form have several checkboxes in user can click add 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 function in order build table contains checkboxes. function checks related object attributes in order render correct information in form.

public function tabtubemodif($outil){     $tubes=type::findall();     $res='';     foreach ($tubes $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 checkbox i'm calling 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('/');      (var i=0; i<vals.length;i++){         if (vals[i]==document.getelementbyid(id_check).value){             vals.splice(i, 1);         }     }     (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 suppose add/remove corresponding string hidden text input "tube". have 2 problems.

first see set alerts in js function see in part of code am, , seems when checkbox checked when form loads, weather check or uncheck pass "uncheck" part of code...i believe due (in tabtubemodif) way check them "checked="checked"" can't think of way it.

2nd problem comes on alert(document.getelementbyid("tube").value) returns empty, when on page , in genrated html code has value :

so sum problem : if box checked on load of form, uncheck once, pass part of code "#tube" field not updated cause it's value seems empty (when not in fact). , if try try re-check same box, goes in uncheck part of js code...

any appreciated !