！小弟我遇到了一个很诡异的有关问题，各位路过的大神帮忙看看

2012-08-01

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

求助！我遇到了一个很诡异的问题，各位路过的大神帮忙看看
代码如下，很简单的几行代码：

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");           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> 
 
[解决办法]
checkbox name相同的只存在一个时没有length属性，2个以上才会有length属性

热点排行

Bad Request.

JavaScript

！小弟我遇到了一个很诡异的有关问题，各位路过的大神帮忙看看