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开发规范要求(规范化代码)
Aug 16 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
审计专业自荐信范文
2014/04/21 职场文书
2014年建筑工作总结
2014/11/26 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Python安装使用Scrapy框架
2022/04/12 Python