求助！我遇到了一个很诡异的问题，各位路过的大神帮忙看看

代码如下，很简单的几行代码：<html>
   <script type="text/javascript">
  function processor(){
  var echkbox = null;  
  var addhere=document.getElementById("div");  
  echkbox=document.createElement("input");  
  echkbox.setAttribute("type","checkbox");  
  echkbox.setAttribute("id","checkbox");  
  echkbox.setAttribute("value","蔬菜");  
  echkbox.onclick = addValue;  
  addhere.appendChild(echkbox);
  addhere.appendChild(document.createTextNode("蔬菜"));
  }
 
  function addValue(){
  var value = "";
  var len = document.all.checkbox.length;
  //显示当前checkbox的个数
  window.alert(len)
  for(var i=0;i<len;i++){
   if(document.all.checkbox[i].checked == true){
   value = value + document.all.checkbox[i].value +",";
   }
  }
  //给text文本框赋值
  document.getElementById("text").value = value;
  }
   </script>
  
  <body>
    <center>
    
            种类：<input type="text" id="text" />
<div id="div" > </div>
<input type="button" value="增加" onclick="processor();">
    </center>
  </body>
</html>
这段代码的目的，是增加一个checkbox，然后选中checkbox，此时在文本框中能显示选中的checkbox的内容。现在遇到的情况时这样的，当只增加一个checkbox时，即使选中这个checkbox的内容，在文本框中也不能显示内容，而且打印此时checkbox的个数为“undefined”，如下图所示：但是，诡异的情况发生了，当增加的checkbox的个数为两个或者两个以上时，此时如果选中任何一个checkbox的内容，在文本框中都能显示其内容，而且打印checkbox的个数也是正常的。比如增加两个时，截图如下：请各位大神帮忙看看问题出在哪个地方，小弟感激不尽

解决方案 »

  1.   

    只发现一个问题，就是你创建的所有checkbox都拥有相同的ID，
    其他就不知道了～
      

  2.   

    <html> 
    <script type="text/javascript"> 
    function processor(){ 
    var echkbox = null; 
    var addhere=document.getElementById("div"); 
    echkbox=document.createElement("input"); 
    echkbox.setAttribute("type","checkbox");
    echkbox.setAttribute("id","checkbox"); 
    echkbox.setAttribute("value","蔬菜"); 
    echkbox.onclick = addValue; 
    addhere.appendChild(echkbox); 
    addhere.appendChild(document.createTextNode("蔬菜")); 
    } 
    function addValue(){
    var value = ""; 
    var len = document.getElementById("div").getElementsByTagName("input").length; //显示当前checkbox的个数
    window.alert(len);
    for(var i=0;i<len;i++){ 
    if(document.getElementById("div").getElementsByTagName("input")[i].checked == true){ 
    value = value + document.getElementById("div").getElementsByTagName("input")[i].value +","; 
    } 
    }
    document.getElementById("text").value = value; 
    } 
    </script> 
    <body> 
    <center> 种类：<input type="text" id="text" /> 
    <div id="div" > </div> 
    <input type="button" value="增加" onclick="processor();"> 
    </center> 
    </body> 
    </html> 
    这样试试
      

  3.   


    <html>
       <script type="text/javascript">
         function processor(){
             var echkbox = null;  
             var addhere=document.getElementById("div");  
             echkbox=document.createElement("input");  
             echkbox.setAttribute("type","checkbox");  
             echkbox.setAttribute("id","checkbox");  
             echkbox.setAttribute("value","蔬菜");  
             echkbox.onclick = addValue;  
             addhere.appendChild(echkbox);
             addhere.appendChild(document.createTextNode("蔬菜"));
         }
         
         function addValue(){
             var value = "";
             var len = document.getElementById("div").getElementsByTagName("input");
             //显示当前checkbox的个数
             window.alert(len.length)
             for(var i=0;i<len.length;i++){
                  if(len[i].checked == true){
                      value = value + len[i].value +",";
                  }
             }
             //给text文本框赋值
             document.getElementById("text").value = value;
         }
       </script>
      
      <body>
        <center>
        
                种类：<input type="text" id="text" />
            <div id="div" >        </div>
            <input type="button" value="增加" onclick="processor();">
        </center>
      </body>
    </html>
      

  4.   

    checkbox name相同的只存在一个时没有length属性，2个以上才会有length属性