Question

js动态添加的radio，点击label无效

js动态添加的radio，点击label无效，应该怎么做才能点击文字就是选中

Answer 1

首先要明确下面几点：

1、动态添加的radio必须有name属性，同一组的radio其name属性一定相同（所谓同一组就是说多个radio中只有一个被选中，其他自动恢复为未选中状态）；

2、如果要关联label，则radio必须设置id属性，且id必须具有唯一性（不但radio之间的id不能相同，整个页面所有元素的id都不能相同）；

3、label的for属性必须与所关联的radio相同。

下面是个已通过测试的例子：

<button id=btn>添加radio</button>
<div id=test></div>
<script>
var id=100;
window.onload=function(){
   document.getElementById("btn").onclick=function(){
      var ipt=document.createElement("input");
      ipt.name="r";
      ipt.type="radio";
      ipt.id="r"+id;
      document.getElementById("test").appendChild(ipt);
      var lbl=document.createElement("label");
      lbl.setAttribute("for","r"+id);
      lbl.innerHTML="r"+id;
      document.getElementById("test").appendChild(lbl);
      id++;
   }
}
</script>

如果把radio放到label内，也可以不设置radio的id属性和label的for属性：

<button id=btn>添加radio</button>
<div id=test></div>
<script>
window.onload=function(){
   document.getElementById("btn").onclick=function(){
      var lbl=document.createElement("label");
      lbl.innerHTML="r"+parseInt(Math.random()*1000);
      var ipt=document.createElement("input");
      ipt.name="r";
      ipt.type="radio";
      lbl.appendChild(ipt);
      document.getElementById("test").appendChild(lbl);
   }
}
</script>

追问

我说的动态添加是这样的，但是for没有用，点击文字没有反应。