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 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
Vue-Router的使用方法
Sep 05 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP 基本语法格式
2009/12/15 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP 中常量的知识整理
2017/04/14 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python3实现磁盘空间监控
2018/06/21 Python
python各类经纬度转换的实例代码
2019/08/08 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
检查接待方案
2014/02/27 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
python创建字典及相关管理操作
2022/04/13 Python