复选框选择即时传值的有关问题 _JavaScript

复选框选择即时传值的问题？
大虾们，小弟最新想做个复选框，可以及时传递表单值，一直做不好，还希望大虾们帮帮忙。
我想表现的方式如下

<form ACTION="" name="form1">
<table>
<tr>
<td>
<input type="checkbox" name="type[]" value="1"> 类别一
<input type="checkbox" name="type[]" value="2"> 类别二
<input type="checkbox" name="type[]" value="3"> 类别三
<td>
</tr>
<tr>
<td>
<span name="selectedPlayerName">< 未选择 ></span>
<td>
</tr>
</table>
</form>

我想在选择类别的同时，在"selectedName"同时显示出已经选择的类别名称，取消复选框，内容也同时消失，这样的方式可以吗？
请大家帮帮忙！

------解决方案--------------------

HTML code

<html>
<head>
<script language="javascript" type="text/javascript">
var arr = [];
var noCheckHTML = "&lt; 未选择 &gt;"

function init()
{//load初始化事件
    with(document.getElementById("selectedPlayerID"))
    {
        innerHTML = noCheckHTML;
    }
    var chk =document.getElementsByName("type[]");
    for(var i=0;i<chk.length;i++)
    {
        chk[i].checked = false;
        chk[i].onclick=new Function("chkClick(this.checked,this.title)")
    }
    
}
Array.prototype.contains = function(o)  
{ //判断数组arr中是否含有元素o
      var flag = false;
      for(var i=0;i<this.length;i++)
      {
         if(this[i]==o) 
         {
            flag = true;
            break;
         }
         
      }
      return flag;
}
function chkClick(_isChecked,_title)
{
    _isChecked?arr.push(_title):arr.pop(_title);
    with(document.getElementById("selectedPlayerID"))
    {
        arr.length>0?innerHTML = "&lt; "+arr.toString()+" &gt;":innerHTML = noCheckHTML;
    }
}
</script>
</head>
<body onload="init()">
<form ACTION="" name="form1" > 
<table > 
   <tr > 
      <td >                  
       <input type="checkbox" name="type[]" value="1" title="类别一"> 类别一 
       <input type="checkbox" name="type[]" value="2" title="类别二"> 类别二 
       <input type="checkbox" name="type[]" value="3" title="类别三"> 类别三 
      <td > 
    </tr > 
   <tr > 
      <td >                  
       <span id="selectedPlayerID" >&lt; 未选择 &gt; </span > 
      <td > 
    </tr > 
</table > 
</form >
</body>
</html>

------解决方案--------------------
HTML code<html>
<head>
<script language="javascript" type="text/javascript">
var arr = [];
var noCheckHTML = "&lt; 未选择 &gt;"

function init()
{//load初始化事件
    with(document.getElementById("selectedPlayerID"))
    {
        innerHTML = noCheckHTML;
    }
    var chk =document.getElementsByName("type[]");
    for(var i=0;i<chk.length;i++)
    {
        chk[i].checked = false;
        chk[i].onclick=new Function("chkClick(this.checked,this.title)")
    }

}

Array.prototype.contains = function(o)  
{ //判断数组arr中是否含有元素,有返回index,没有返回-1
      var index = -1;
      for(var i=0;i<this.length;i++)
      {
         if(this[i]==o) 
         {
            index = i;
            break;
         }
      }
      return index;
}

Array.prototype.remove = function(o)  
{ //判断数组arr中是否含有元素o
    var index;
    var t = this;
    if((index=this.contains(o))!=-1)
    {
        t= t.slice(0,index).concat(t.slice(index+1,t.length));
    }
   
    return t;
}


function chkClick(_isChecked,_title)
{
    _isChecked?arr.push(_title):arr = arr.remove(_title);
    with(document.getElementById("selectedPlayerID"))
    {
        arr.length>0?innerHTML = "&lt; "+arr.toString()+" &gt;":innerHTML = noCheckHTML;
    }
}
</script>
</head>
<body onload="init()">
<form ACTION="" name="form1" > 
<table > 
   <tr > 
      <td >                  
       <input type="checkbox" name="type[]" value="1" title="类别一"> 类别一 
       <input type="checkbox" name="type[]" value="2" title="类别二"> 类别二 
       <input type="checkbox" name="type[]" value="3" title="类别三"> 类别三 
      <td > 
    </tr > 
   <tr > 
      <td >                  
       <span id="selectedPlayerID" >&lt; 未选择 &gt; </span > 
      <td > 
    </tr > 
</table > 
</form >
</body>
</html>