<input  type="checkbox"  name="X"  value="A222 |"  >A <br > 
<input  type="checkbox"  name="X"  value="B222 |" >B <br > 
<input  type="checkbox"  name="X"  value="C22 |" >C <br > 
<input type="checkbox" name="Y" value="1">1 
<input type="checkbox" name="Z" value="2">2 <input name="textcheck" type="text" id="textcheck" > 
</body> 
</html> 
<script> function  X() { 
    var  src=event.srcElement ; 
    var  value=src.value; 
    if  (src.checked){ 
        if(src.name=="X"){
         str+=value; 
}
   } 
else{ 
     str=str.replace(value,""); 
    } 
 var  arr=str.split(" |"); 
 var  textcheck=document.getElementById("textcheck"); 
  textcheck.value=arr.join(",").toString(); 

              var  str=new  String(); 
              var  tagarr=document.getElementsByTagName("input"); 
              for  (var  i=0;i <tagarr.length  ;i++  ) 
              { 
                  tagarr[i].attachEvent("onclick",X); 
              } 
</script>