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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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
PHP 定界符 使用技巧
2009/06/14 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
javascript读取xml
2006/11/04 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
js实现二级导航功能
2017/03/03 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python 实现简单的电话本功能
2015/08/09 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
深入解析神经网络从原理到实现
2019/07/26 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
产品生产计划书
2014/05/07 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
黄石寨导游词
2015/02/05 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript