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 检测浏览器类型和版本的代码
Sep 15 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 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下读取文本文件的代码
2008/07/02 PHP
php fckeditor 调用的函数
2009/06/21 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
vue实现搜索功能
2019/05/28 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
基于python爬虫数据处理(详解)
2017/06/10 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
中式餐厅创业计划书范文
2014/01/23 职场文书
伊琍体标语
2014/06/25 职场文书
学习党章的体会
2014/11/07 职场文书
迎新生欢迎词
2015/01/23 职场文书
教师求职自荐信范文
2015/03/04 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书