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 相关文章推荐
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
JS实现多功能计算器
Oct 28 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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 数组入门教程小结
2009/05/20 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
php验证手机号码
2015/11/11 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
分页栏的web标准实现
2011/11/01 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python实现人机猜拳小游戏
2020/02/03 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
大学自我评价
2014/02/12 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
投诉信范文
2015/07/02 职场文书