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的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue实现PC端录音功能的实例代码
Jun 05 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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
PHP 定界符 使用技巧
2009/06/14 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
对pandas中apply函数的用法详解
2018/04/10 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
大学生实习期自我评价范文
2013/10/03 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
开学第一周总结
2015/07/16 职场文书
公司董事任命书
2015/09/21 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS