javascript使用shift+click实现选择和反选checkbox的方法


Posted in Javascript onMay 04, 2015

本文实例讲述了javascript使用shift+click实现选择和反选checkbox的方法。分享给大家供大家参考。具体实现方法如下:

var lastChecked = null;
var handleChecked = function(e) {
 if(lastChecked && e.shiftKey) {
  var i = $('input[type="checkbox"]').index(lastChecked);
 var j = $('input[type="checkbox"]').index(e.target);
 var checkboxes = [];
 if (j > i) {
  checkboxes = $('input[type="checkbox"]:gt('+ (i-1) +'):lt('+(j-i)+')');
 } else {
  checkboxes = $('input[type="checkbox"]:gt('+ j +'):lt('+ (i-j) +')');
 }
 if (!$(e.target).is(':checked')) {
  $(checkboxes).removeAttr('checked');
 } else {
  $(checkboxes).attr('checked', 'checked');
 }
 }
 lastChecked = e.target;
 // Other click action code.
}
$('input[type=checkbox]').click(handleChecked);

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
Vue制作Todo List网页
Apr 26 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
js实现兼容IE和FF的上下层的移动
May 04 #Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 #Javascript
jQuery实现的向下图文信息滚动效果
May 03 #Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 #Javascript
JQuery页面地址处理插件jqURL详解
May 03 #Javascript
jQuery的animate函数实现图文切换动画效果
May 03 #Javascript
php+ajax+jquery实现点击加载更多内容
May 03 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python中map()与zip()操作方法
2016/02/27 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
实例代码讲解Python 线程池
2020/08/24 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
省三好学生申请材料
2014/01/22 职场文书
制作部班长职位说明书
2014/02/26 职场文书
测控技术自荐信
2014/06/05 职场文书
整改落实自查报告
2014/11/05 职场文书
幼儿园个人总结
2015/02/28 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python