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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
单元选择合并变色示例代码
May 26 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
完美解决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
基于MySQL体系结构的分析
2013/05/02 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python中with及contextlib的用法详解
2017/06/08 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python中实现switch功能实例解析
2018/01/11 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
大学自主招生自荐信
2013/12/16 职场文书
结对共建协议书
2014/08/20 职场文书
尊师重教演讲稿
2014/09/04 职场文书
爱国影片观后感
2015/06/18 职场文书
新教师教学工作总结
2015/08/14 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python