日期:2014-05-16  浏览次数:20434 次

求助!我遇到了一个很诡异的问题,各位路过的大神帮忙看看
代码如下,很简单的几行代码:
HTML code

<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的个数也是正常的。比如增加两个时,截图如下:

请各位大神帮忙看看问题出在哪个地方,小弟感激不尽

------解决方案--------------------
<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> 
这样试试
------解决方案--------------------
HTML code

<html>
   <script type="text/javascript">
     function processor(){
         var echkbox = null;  
         var addhere=document.getElementById("div");