Javascript全选功能

运行第一段代码，<td>中的复选框数量将显示在警告框中，方法是单击表格标题的复选框。但是，运行第二个代码段时，<td>中的复选框数量将不会显示在警报框中。Javascript全选功能

注意：第一个片段获取三个表格行，第二个片段获取两个表格行。

任何人都可以帮我吗？提前致谢！

------------- 1日摘录--------------------

<!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=utf-8" /> 
    <title>Untitled Document</title> 
    <script type="text/javascript"> 
     function CheckAll(formName,eleName,controlID) 
     { 
      var count = document.forms[formName].elements[eleName].length; 
      alert(count); 
     } 
    </script> 
    </head> 

    <body> 
    <form name="report" method="post" action="#"> 

     <table border="1"> 
      <tr> 
       <th width="5%"> 
       <input type='checkbox' id="selectController" onClick="CheckAll('report','list[]',this.id)"/> 
       </th> 
       <th width="30%"> 
       Name 
       </th> 
       <th width="30%"> 
       Number 
       </th> 
       <th width="35%"> 
       </th> 
      </tr> 
      <tr id='row0' class='odd' > 
       <td > 
       <input name='list[]' type='checkbox' value="1" id='checkbox-1' onClick='ClickCheckbox(this.id)' /> 
       </td> 
       <td> 
       SensorA 
       </td> 
       <td> 
       1234567 
       </td> 
       <td> 
        [ <a href="#" class="basketlink">Add</a> ] 
       </td> 
      </tr> 
      <tr id='row1' class='even' > 
       <td > 
       <input name='list[]' type='checkbox' value="2" id='checkbox-2' onClick='ClickCheckbox(this.id)' /> 
       </td> 
       <td> 
       SensorA 
       </td> 
       <td> 
       1234567 
       </td> 
       <td> 
        [ <a href="#" class="basketlink">Add</a> ] 
       </td> 
      </tr> 

     </table> 
    </form> 
    </body> 
    </html>

- ----------第二代片段--------------

<!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=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
    function CheckAll(formName,eleName,controlID) 
    { 
     var count = document.forms[formName].elements[eleName].length; 
     alert(count); 
    } 
</script> 
</head> 

<body> 
<form name="report" method="post" action="#"> 

    <table border="1"> 
     <tr> 
      <th width="5%"> 
      <input type='checkbox' id="selectController" onClick="CheckAll('report','list[]',this.id)"/> 
      </th> 
      <th width="30%"> 
      Name 
      </th> 
      <th width="30%"> 
      Number 
      </th> 
      <th width="35%"> 
      </th> 
     </tr> 
     <tr id='row0' class='odd' > 
      <td > 
      <input name='list[]' type='checkbox' value="1" id='checkbox-1' onClick='ClickCheckbox(this.id)' /> 
      </td> 
      <td> 
      SensorA 
      </td> 
      <td> 
      1234567 
      </td> 
      <td> 
       [ <a href="#" class="basketlink">Add</a> ] 
      </td> 
     </tr> 
    </table> 
</form> 
</body> 
</html>

来源

2011-07-26 Acubi

在一个侧面说明，你有一个''在'封闭'你的第一个例子。 – pimvdb

是第一个有三个输入标签，第二个只有两个。你正在计算一个表单的元素。 –

您的问题是 “长度”。长度是数组的属性，而不是每个javascript对象。在你的第二个片段中，因为你只有1个复选框，你通过document.forms [formName] .elements [eleName]得到的是一个对象而不是一个数组;这个对象没有长度属性。因此，你应该做这样的事情：

var count; 
if(document.forms[formName].elements[eleName].length) 
count = document.forms[formName].elements[eleName].length; 
else 
count = 1 //only if you are sure that you will always have 1 checkbox rendered, otherwise use some other logic to say 0 or 1.

来源

2011-07-26 10:22:24 legendofawesomeness

在第二种情况下只有一个。因此，您不会得到NodeList（某种数组），而是元素本身，它不具有.length属性。所以在.length === undefined的情况下，假设它是1。

缩小例如：

随着1元素：http://jsfiddle.net/9J4fB/1/
随着2个元件：http://jsfiddle.net/9J4fB/

来源

2011-07-26 10:19:46 pimvdb

Javascript全选功能

回答

相关问题