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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
js转义字符介绍
Nov 05 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
在pycharm中开发vue的方法步骤
Mar 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
我的论坛源代码(二)
2006/10/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python高级特性简介
2020/08/13 Python
EJB面试题
2015/07/28 面试题
个人找工作自荐信格式
2013/09/21 职场文书
护理专业本科生自荐信
2013/10/01 职场文书
英文自我鉴定
2013/12/10 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
求职信需要的五点内容
2014/02/01 职场文书
运动会的口号
2014/06/09 职场文书
岗位安全生产责任书
2014/07/28 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
工商局调档介绍信
2015/10/22 职场文书