JS动态生成复选框 求高手帮解决下

我做一个网站后台时碰到一个问题，求高手帮解决下，不胜感激，问题如下：
    一级栏目菜单组成一个选项卡，每个菜单下对应多个二级菜单，我想实现的功能是，每个一级菜单下对应的二级菜单只能选一个，当选中时，在旁边的div里动态添加一个复选框，复选框后面跟着相应的值，并且是选中的状态，当我点击复选框时，即取消该栏目类型，因为要获取最终的值提交给后台，所以还需要设置一个隐藏域，用来保存由选中的类型组成的字符串。
    现在的遇到个问题，在同一个一级菜单下，当我点击不同的类型时，都会生成一个复选框，并且同一个类型，每次点击也会生成一个复选框，还有就是生成复选框时，无法在复选框后面跟相应的值。隐藏域的问题是刚想到的，也没有实现。我实现的功能代码在下面，求高手给修改补全，谢谢。    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.two{ width:440px; height:173px;}
.twodis{ width:440px; height:173px; display:none;}
</style>
<script language="javascript">
function showtype(v){
for(i=1;i<=7;i++){
var das = "d" + i;
if(i==v)
{
document.getElementById(das).className = "two";
}else{
document.getElementById(das).className = "twodis";
}
} 
} 


function   clearbox(v){   
  document.body.removeChild(v);   
}   
  function   addCheckbox(v){   
  var   str="<input   title="+v+"   type=checkbox   checked   onclick=clearbox(this)   value="+v+" >";   
  var   newCheckbox   =   document.createElement(str);   

  document.getElementById("boxes").insertBefore(newCheckbox);   
  }   
</script>
</head><body>
<form id="form1" name="form1" method="post" action="">
<div style=" float:left;">
<span>一级菜单部分</span>
<div style="width:440px; height:22px;">
<label for="r1"><input id="r1" name="r1" type="radio" onclick="showtype(1)" value="" /> 111</label>
<label for="r2"><input id="r2" name="r1" type="radio" onclick="showtype(2)" value="" /> 222</label>
<label for="r3"><input id="r3" name="r1" type="radio" onclick="showtype(3)" value="" /> 333</label>
<label for="r4"><input id="r4" name="r1" type="radio" onclick="showtype(4)" value="" /> 444</label>
<label for="r5"><input id="r5" name="r1" type="radio" onclick="showtype(5)" value="" /> 555</label>
<label for="r6"><input id="r6" name="r1" type="radio" onclick="showtype(6)" value="" /> 666</label>
<label for="r7"><input id="r7" name="r1" type="radio" onclick="showtype(7)" value="" /> 777</label>
</div>
<span>二级菜单部分</span>
<div style="width:440px; height:137px; overflow:hidden;">
<div id="d1" class="two">
<label for="da1"><input id="da1" name="da" type="radio" value="ka"  onclick="addCheckbox(this.value)" />二级类型a</label>
<label for="da2"><input id="da2" name="da" type="radio" value="kb"  onclick="addCheckbox(this.value)" />二级类型a</label>
<label for="da3"><input id="da3" name="da" type="radio" value="kc"  onclick="addCheckbox(this.value)" />二级类型a</label>
</div>
<div id="d2" class="twodis">
<label for="db1"><input id="db1" name="db" type="radio" value="ke"  onclick="addCheckbox(this.value)" />二级类型b</label>
<label for="db2"><input id="db2" name="db" type="radio" value="kf"  onclick="addCheckbox(this.value)" />二级类型b</label>
</div>
<div id="d3" class="twodis">
<label for="dc1"><input id="dc1" name="dc" type="radio" value="kg"  onclick="addCheckbox(this.value)" />二级类型c</label>
<label for="dc2"><input id="dc2" name="dc" type="radio" value="kh"  onclick="addCheckbox(this.value)" />二级类型c</label>
</div>
<div id="d4" class="twodis">
<label for="dd1"><input id="dd1" name="dd" type="radio" value="ki"  onclick="addCheckbox(this.value)" />二级类型d</label>
<label for="dd2"><input id="dd2" name="dd" type="radio" value="kj"  onclick="addCheckbox(this.value)" />二级类型d</label>
</div>
<div id="d5" class="twodis">
<label for="de1"><input id="de1" name="de" type="radio" value="kl"  onclick="addCheckbox(this.value)" />二级类型e</label>
<label for="de2"><input id="de2" name="de" type="radio" value="km"  onclick="addCheckbox(this.value)" />二级类型e</label>
</div>
<div id="d6" class="twodis">
<label for="df1"><input id="df1" name="df" type="radio" value="kn"  onclick="addCheckbox(this.value)" />二级类型f</label>
<label for="df2"><input id="df2" name="df" type="radio" value="ko"  onclick="addCheckbox(this.value)" />二级类型f</label>
</div>
<div id="d7" class="twodis">
<label for="dg1"><input id="dg1" name="dg" type="radio" value="kp"  onclick="addCheckbox(this.value)" />二级类型g</label>
<label for="dg2"><input id="dg2" name="dg" type="radio" value="kq"  onclick="addCheckbox(this.value)" />二级类型g</label>
</div>
</div>
</div>
<div id="boxes" style=" width:261px; height:160px; float:left; background-color:#999999;"></div>
</form> 
</body>
</html>

解决方案 »

  1.   

    function  addCheckbox(v){ 
      var  str=" <input  title="+v+"  type=checkbox  checked  onclick=clearbox(this)  value="+v+" >"; 
      var  newCheckbox  =  document.createElement(str); 
      document.getElementById("boxes").insertBefore(newCheckbox); 
      }  
    document.createElement(str)的参数似乎有问题，也在做类似的东西，看到网上大部分用的是一个标签名作为参数，我也试了下，如果str=“input”；newCheckbox.type=“checkbox”；是可以显示你设置的类型的，但是如果str=“inpt”的话就不可以。
    还有就是不知道复选框后面的文字可不可以通过属性设置，我是各初学者，知道的话请告诉我呀。
    你可以参考下：http://czhjq.blog.163.com.sixxs.org/blog/static/85014962009112945835922/