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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 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
德劲1103的维修打理经验
2021/03/02 无线电
php下的权限算法的实现
2007/04/28 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
angular多语言配置详解
2019/05/16 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python批量导出导入MySQL用户的方法
2013/11/15 Python
python基础教程之Hello World!
2014/08/29 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
python列表的逆序遍历实现
2020/04/20 Python
企划专员岗位职责
2013/12/09 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
妇女工作先进事迹
2014/08/17 职场文书
运动会100米加油稿
2015/07/21 职场文书
《花钟》教学反思
2016/02/17 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏