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全選功能

回答

相關問題