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实现Div上下移动示例
Apr 23 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php ios推送(代码)
2013/07/01 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
初识Javascript小结
2015/07/16 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
python超简单解决约瑟夫环问题
2015/05/12 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python爬虫用mongodb的理由
2020/07/28 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
会议邀请函范文
2014/01/09 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
倡议书的写法
2014/08/30 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Java基础——Map集合
2022/04/01 Java/Android