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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章