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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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
德劲1103二次变频版的打磨
2021/03/02 无线电
php购物网站支付paypal使用方法
2010/11/28 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
个人求职自荐信范文
2014/06/20 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
合同补充协议书
2016/03/24 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis