全选反选的逻辑和代码

布局上大体是这个样子

<div id=""><div><span class="all"></span>我是全选按钮</div><div><span class="notall"></span>单选1<br /><span class="notall"></span>单选2<br /><span class="notall"></span>单选3<br /><span class="notall"></span>单选4<br /><span class="notall"></span>单选5<br /><span class="notall"></span>单选6<br /><span class="notall"></span>单选7</div></div>

接下来是js逻辑，
第一步是全选按钮的点击事件，比较简单，点击之后，判断全选按钮是否有一个选中的属性，没有选中属性就加上选中属性，添加active的类名，并把所有的小的按钮全部添加选中属性和active类名，反之，同理，消除所有的选中属性和active类名。

$(".all").click(function(){if($(this).attr("rel")!="checked"){        //判断 全选按钮rel属性是否选中$(this).attr("rel","checked")         //选中的话 设置checked    active$(this).addClass("active")              $(".notall").attr("rel","checked")        //设置所有单选设置checked   active$(".notall").addClass("active")           }else{$(this).removeAttr("rel","checked")   //全选按钮未选中,移除全选按钮 active属性$(this).removeClass("active")$(".notall").removeAttr("rel","checked")  //移除所有单选    checked active$(".notall").removeClass("active")}})

接下来就是单个的按钮的选中控制，
因为要所有的按钮都选中之后，全选按钮自动亮起，所以在单个按钮的点击事件中创建一个数组，填入每个按钮的rel属性，在这个数组中如果有rel属性的值是undefined，就代表没有全部选中，如果没有rel的值是undefined，则就是全部选中，从而进行控制全选按钮的样式

$(".notall").click(function(){var all=[];if($(this).attr("rel")!="checked"){     //判断单选按钮 是否选中$(this).attr("rel","checked")          //选中的话  设置 为checked  添加 active$(this).addClass("active")              }else{$(this).removeAttr("rel","checked")   //未选中的话    移除 为checked active$(this).removeClass("active")}for(let i=0;i<$(".notall").length;i++){        //往数组里面 循环添加  各个单选的rel属性all.push($(".notall").eq(i).attr("rel"))}if(all.indexOf(undefined)>=0){             //如果数组里面有 undefined  说明有某个或者多个 单选 没有被选中$(".all").removeAttr("rel","checked")$(".all").removeClass("active")}else{$(".all").attr("rel","checked")                //否则  说明全部被选中  ---> 打开全选 $(".all").addClass("active")}})

全选反选的逻辑和代码相关推荐

用js创建表格及全选反选
用js创建表格及全选反选用js代码来实现创建表格,及全选反选,代码效果图如下: <!DOCTYPE html> <html lang="en"><h ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
【HTML5】页面点击按钮添加一行删除一行全选反选全不选
页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html><head>< ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
android 全选功能,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...

全选反选的逻辑和代码

全选反选的逻辑和代码相关推荐

最新文章

热门文章