如何将checkbox选择的值以块的形式传到文本框，在线等，急……

我想做一个类似校内网上赠送礼物时选择好友的过程，单击“添加好友时”就会弹出选择好友对话框，在复选框中选择一个好友名称，上面的文本框就会添加一个名称（注：是以一个整体形式显示的），这样删除时单击“删除”就可以完整删除一个名称，不会导致删除不完整的名称。功能叙述如上。
  问题如下：1.选择复选框时可以实时添加名称到文本框。这个我觉得可以利用复选框的checked来确定。（这个已搞定）2、添加复选框选好的名称到文本框时， 如何实现名称整体显示后面还加一个删除图标。
  望各位大侠指点迷津，若有相关案例不胜感激

解决方案 »

  1.   

    是这样的效果吗？ 输入 敲回车
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>js 文本框效果</title>
    <style type="text/css">
    .inputs{width:600px;height:auto; border:1px solid #ddd;margin:100px auto;line-height:20px;}
    .divInputs{width:auto;height:auto;line-height:20px;min-height:20px; }
    .divHistory{height:20px;width:auto;line-height:20px;float:left;display:inline; margin:0px 3px; background-color:#dee;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */}
    .clear{clear:both;} </style>
    </head>
    <body><div class="inputs" id='inputs'>
    <div class="divInputs" id='divInputs'>
    <input  type='text' value="" style="float:left;border:0px;height:20px; " id='txtInput'/>
    <div class='clear'></div>
    </div>
    </div>
    <input  type='button' value="查看设置的值" id="btn"/>
    </body>
    <script type="text/javascript">window.onload=function()
    {
       var inputs=[];
       var txtInput = document.getElementById("txtInput");
       var divInputs = document.getElementById("divInputs");
       document.getElementById("btn").onclick=function(){
        alert(inputs);
       } ;
       
       document.getElementById("inputs").onclick=function(){
            txtInput.focus();
       } ;
       txtInput.onkeydown=function(e)
       {
            e=e||event;
            if(e.keyCode==13){ // 回车
                var input = txtInput.value.trim();
                if(input==""){
                    return;
                }
                if(inputs.indexOf(input)>-1){
                    alert("内容已存在");
                    return;
                }
                var div = document.createElement("div");
                div.innerHTML ="<span>" +input+"</span>";
                div.className="divHistory";
                var span = document.createElement("span");
                span.style.cssText ="top:0px;right:0px;position:relative;z-index:99999;font-size:12px; border:1px solid red;";
                span.innerHTML="X";
                div.appendChild(span);
                divInputs.insertBefore(div,txtInput);
                inputs.push(input);
                txtInput.value ="";
                span.onclick=function(){
                    this.parentNode.parentNode.removeChild(this.parentNode);
                    inputs.remove(input);
                };
            }
       };
    };
    String.prototype.trim=function(){
        return this.replace(/(^\s*)|(\s*$)/g,'');
    };
    Array.prototype.indexOf=function(value){
        if(this!=null && this.length>0){
            for(var i=0;i<this.length;i++)
            {
                if(this[i]==value){ return i;}
            }
        }
        return -1;
    };
    Array.prototype.removeAt=function(index){
    this.splice(index,1);
    }
    Array.prototype.remove=function(obj){
    var index=this.indexOf(obj);
    if (index>=0){
    this.removeAt(index);
    }
    } 
    </script>
    </html>