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

在手机app以及各大网站上经常看到这类按钮,那么是怎样做的呢?下面我介绍怎样将用js 来实现该功能。

用js实现简易全选、全不选、反选效果_第1张图片
最终效果图

1、body部分代码如下


用js实现简易全选、全不选、反选效果_第2张图片

2、js部分

用js实现简易全选、全不选、反选效果_第3张图片
声明变量


用js实现简易全选、全不选、反选效果_第4张图片
全选函数


用js实现简易全选、全不选、反选效果_第5张图片
全不选函数


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


用js实现简易全选、全不选、反选效果_第7张图片
联动函数


用js实现简易全选、全不选、反选效果_第8张图片
监听


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


用js实现简易全选、全不选、反选效果_第10张图片
控制反选的函数

你可能感兴趣的:(用js实现简易全选、全不选、反选效果)