JQuery实现列表中复选框全选反选功能封装(推荐)


Posted in Javascript onNovember 24, 2016

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

JQuery实现列表中复选框全选反选功能封装(推荐)

我当时就是简单的实现了,然后想封装到公共的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实现列表中复选框全选反选功能封装(推荐)

我发现全选复选框用于和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方法。

以上所述是小编给大家介绍的JQuery实现列表中复选框全选反选功能封装(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JS实现4位随机验证码
Oct 19 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
完美解决IE不支持Data.parse()的问题
Nov 24 #Javascript
JS 终止执行的实现方法
Nov 24 #Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 #Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 #Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 #Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 #Javascript
纯javascript版日历控件
Nov 24 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript闭包的理解
2015/04/01 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python微信操控itchat的方法
2019/05/31 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python实现简单颜色识别程序
2020/02/19 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
C语言面试题
2015/10/30 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
高中毕业的自我鉴定
2013/12/09 职场文书
《三峡》教学反思
2014/03/01 职场文书
离婚被告代理词
2015/05/23 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Win11查看设备管理器
2022/04/19 数码科技