jQuery实现checkbox列表的全选、反选功能


Posted in Javascript onNovember 24, 2016

我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如:

jQuery实现checkbox列表的全选、反选功能

我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装;

$(':checkbox[data-check-target]').click(function () {
  var target = $(this).attr('data-check-target');
  if ($(this).prop('checked')) {
    $(target).prop('checked', true);
  } else {
    $(target).prop('checked', false);
  }
});

首先这儿的高封装性就体现出来了,只有一个自定义的data-check-target属性用于js和html分离后的连接桥梁(而我当时用两个:一个全选复选框,一个子复选框,有关的点都用上了,这样就没起到封装的效果,js和html耦合性太大)(我看到上面的js就在想怎么通过一个连接点把三个相关联的东西联系起来的呢);

接下来我们继续看具体使用的地方:

jQuery实现checkbox列表的全选、反选功能

我发现全选复选框用于和js链接的桥梁的自定义属性data-check-target有点特别:

<input type="checkbox" data-check-target=".id-checkbox" />

它的值为“.id-checkbox”,看起来就感觉好奇怪,继续往下看子复选框实现:

<input type="checkbox" name="ids[]" value="@item.Id" class="id-checkbox" />

到这儿才豁然开朗原来子复选框的class名称就存放在自定义属性data-check-target中;

var target = $(this).attr('data-check-target');

然后再通过自定义属性data-check-target拿到子复选框的class,从而达到高封装性;

我总结的就是js和html通过了自定义属性data-check-target通信,子复选框依赖全选复选框自定义属性data-check-target的值;

这个例子看下来代码不难,也没有什么地方很难理解的,就是通过一个自定义属性巧妙的完成了低耦合的封装,这也是正是这段代码的难点和精髓;

我真心抑制不住内心的崇拜,这几行代码太漂亮了。

PS:上面js为什么用prop而不用attr,因为:如果当前input中初始化未定义checked属性,则该元素没有指定的checked属性,所以.attr()会返回undefined;

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
js断点调试经验分享
Dec 08 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
js中实现继承的五种方法
Jan 25 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 #Javascript
You might like
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
python 快速排序代码
2009/11/23 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python3实现多线程聊天室
2018/12/12 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
高三学生评语大全
2014/04/25 职场文书
工商干部先进事迹
2014/05/14 职场文书
战略合作意向书
2014/07/29 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏