用js实现简易全选、全不选、反选效果

在手机app以及各大网站上经常看到这类按钮,那么是怎样做的呢?下面我介绍怎样将用js 来实现该功能。
用js实现简易全选、全不选、反选效果
文章图片
最终效果图 1、body部分代码如下


用js实现简易全选、全不选、反选效果
文章图片
2、js部分
用js实现简易全选、全不选、反选效果
文章图片
声明变量

用js实现简易全选、全不选、反选效果
文章图片
全选函数 【用js实现简易全选、全不选、反选效果】

用js实现简易全选、全不选、反选效果
文章图片
全不选函数

用js实现简易全选、全不选、反选效果
文章图片
判断全选的那个框是否勾选的函数

用js实现简易全选、全不选、反选效果
文章图片
联动函数


用js实现简易全选、全不选、反选效果
文章图片
监听


用js实现简易全选、全不选、反选效果
文章图片
调用上面声明好的函数

用js实现简易全选、全不选、反选效果
文章图片
控制反选的函数

    推荐阅读