Javascript表单全选取消、全选反选案例

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

jasmine s

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

阅读量552

点赞数 3

分类专栏： Javascript 文章标签： js

本文链接：https://blog.csdn.net/weixin_46513544/article/details/104793509

版权

Javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

 要求：
 点击上面的复选框，下面的复选框全部选中
  再次点击复选框，下面所有的复选框都不选中
思路分析：下面所有的复选框的checked属性跟随全选按钮

在这里插入图片描述

标签搭建表格基本框架

在这里插入图片描述
css代码部分，要注意的是根据HTML的结构来写，能够提高效率，首先是div定义的class标签，table标签合并的使用collapse,定义th、td标签之后，要逐个对她们在进行定义。

在这里插入图片描述

这里是全选取消。首先获取需要的标签，其此用for循坏调用下面的函数。JS关键在于将j_tbs附在j-cbAll下面调用this.checked的使用。
在这里插入图片描述
这里是全选反选。下面的复选框需要全面选中，上面的复选框才能选中。给下面的复选框绑定注册事件，每次点击，都要检查下面的复选框是否选中第二个for循环来完成，在用flag控制全选按钮是否选中。其中，最后一个for循环后面加上break退出for循环这样可以提高效率因为只有一个没有选中，剩下的无需循坏。