jQuery实现checkbox列表的全选、反选功能


Posted in Javascript onNovember 24, 2016

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

jQuery实现checkbox列表的全选、反选功能

我当时就是简单的实现了,然后想封装到公共的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实现checkbox列表的全选、反选功能

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

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python实例化对象的具体方法
2020/06/17 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
内业资料员岗位职责
2014/01/04 职场文书
户籍证明的格式
2014/01/13 职场文书
幼儿园新年寄语
2014/04/03 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
个人求职信格式范文
2015/03/20 职场文书