JavaScript全选复选框checkbox效果

最新推荐文章于 2024-04-02 19:39:43 发布

morning2008

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量288

点赞数

分类专栏：编程语言 Web前端

本文链接：https://blog.csdn.net/morning2008/article/details/50491866

版权

Web前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

编程语言

9 篇文章 0 订阅

订阅专栏

大家在使用邮箱收发邮件时通常会使用这么一个批量操作，比如将第n页所有旧的邮件全部删除，

大部分mail程序都提供了这样一个功能——全选复选框checkbox，当你点击全选前面的复选框时，会

中所有的复选框。很人性化，很便捷的一个操作，那么它的工作原理是怎样的呢？其实也蛮简单的，有以下几个步骤：

1.通过脚本获取指定的元素集合，其实就是所有的复选框组成的一个数组，把这个数组对象保存到一个变量里。

2.使用for语句遍历数组对象，同时给数组中的每个元素添加上单击的选中事件checked，这样所有的复选框就被选中了。

下面是具体代码(提示:您可以复制代码内容保存到记事本里,并修改后缀名为.htm即可看到效果)：

 
 <html> 

<head> 

  <script type="text/javascript" language="javascript"> 
       function checkAll(o) {  

         var mytable = document.getElementById("table1").getElementsByTagName("input");  

         for(var i=1,ci;ci=mytable[i++];) {  

        ci.checked = o.checked;  
         }  
       }  

  </script> 

</head> 
 

<body> 

<table id="table1"> 

  <tr> 

    <th><input type='checkbox' onclick='javascript: checkAll(this)'>全选</th> 

  </tr> 

  <tr> 

    <td><input type='checkbox'></td> 

  </tr> 

  <tr> 

    <td><input type='checkbox'></td> 

  </tr> 

  <tr> 

    <td><input type='checkbox'></td> 

  </tr> 

  <tr> 

    <td><input type='checkbox'></td> 

  </tr> 

</table> 

</body> 

</html>

morning2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全选复选框checkbox效果

大家在使用邮箱收发邮件时通常会使用这么一个批量操作，比如将第n页所有旧的邮件全部删除，大部分mail程序都提供了这样一个功能——全选复选框checkbox，当你点击全选前面的复选框时，会中所有的复选框。很人性化，很便捷的一个操作，那么它的工作原理是怎样的呢？其实也蛮简单的，有以下几个步骤： 1.通过脚本获取指定的元素集合，其实就是所有的复选框组成的一个数组，把这个数组
复制链接

扫一扫