JavaScript全選複選框checkbox效果

       

       大家在使用郵箱收發郵件時通常會使用這麼一個批量操作,比如將第n頁所有舊的郵件全部刪除,

 

大部分mail程序都提供了 這樣一個功能——全選複選框checkbox,當你點擊全選前面的複選框時,會

 

中所有的複選框。很人性化,很便捷的一個操作,那麼它的工作原理是怎樣的呢?其實也蠻簡單的,有以下幾個步驟:

 

1.通過腳本獲取指定的元素集合,其實就是所有的複選框組成的一個數組,把這個數組對象保存到一個變量裏。

 

2.使用for語句遍歷數組對象,同時給數組中的每個元素添加上單擊的選中事件checked,這樣所有的複選框就被選中了。

 

下面是具體代碼(提示:您可以複製代碼內容保存到記事本里,並修改後綴名爲.htm即可看到效果):

  1. <html>
  2. <head>
  3.   <script type="text/javascript" language="javascript">
  4.      function checkAll(o) {
  5.        var mytable = document.getElementById("table1").getElementsByTagName("input");
  6.        for(var i=1,ci;ci=mytable[i++];) {
  7.         ci.checked = o.checked;
  8.        }
  9.      }
  10.   </script>
  11. </head>
  12. <body>
  13. <table id="table1">
  14.   <tr>
  15.     <th><input type='checkbox' onclick='javascript: checkAll(this)'>全選</th>
  16.   </tr>
  17.   <tr>
  18.     <td><input type='checkbox'></td>
  19.   </tr>
  20.   <tr>
  21.     <td><input type='checkbox'></td>
  22.   </tr>
  23.   <tr>
  24.     <td><input type='checkbox'></td>
  25.   </tr>
  26.   <tr>
  27.     <td><input type='checkbox'></td>
  28.   </tr>
  29. </table>
  30. </body>
  31. </html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章