javascript使用shift+click实现选择和反选checkbox的方法

 更新时间:2015年05月04日 09:11:23   作者:秋风秋雨  
这篇文章主要介绍了javascript使用shift+click实现选择和反选checkbox的方法,涉及javascript针对键盘按键的判断及checkbox的操作技巧,需要的朋友可以参考下

本文实例讲述了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实现粒子流动效果

    这篇文章主要为大家详细介绍了如何通过JavaScript实现粒子流动效果,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2023-09-09
  • 学习JavaScript设计模式之状态模式

    学习JavaScript设计模式之状态模式

    这篇文章主要为大家介绍了JavaScript设计模式中的状态模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 利用location.hash实现跨域iframe自适应

    利用location.hash实现跨域iframe自适应

    其他一些类似js跨域操作问题也可以按这个思路去解决,需要的朋友可以测试下。
    2010-05-05
  • javascript实现验证身份证号的有效性并提示

    javascript实现验证身份证号的有效性并提示

    下面分享的JS脚本是我用过的最完善的身份证号的验证程序了,因为只有真正的身份证号才能被通过,小伙伴们可以试试。直接复制运行。
    2015-04-04
  • js中null与空字符串

    js中null与空字符串""的区别讲解

    今天小编就为大家分享一篇关于js中null与空字符串""的区别讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • javascript 用局部变量来代替全局变量

    javascript 用局部变量来代替全局变量

    在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?
    2009-05-05
  • JavaScript与HTML的结合方法详解

    JavaScript与HTML的结合方法详解

    这篇文章主要介绍了JavaScript与HTML的结合方法,利用实例向大家介绍JavaScript与HTML是如何结合的,内容很详细,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序合法域名配置方法

    微信小程序合法域名配置方法

    这篇文章主要介绍了微信小程序合法域名配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 利用fecha进行JS日期处理

    利用fecha进行JS日期处理

    这篇文章主要介绍的是如何利用fecha进行JS日期处理,在日常项目中,经常会碰到日期处理的需求,这种需求千奇百怪,而且往往经常变化。虽然js提供了原生的Date方法供我们选择,但一些复杂的日期时间处理起来往往力不从心。下面通过这篇文章来一起学习学习吧。
    2016-11-11
  • js实现瀑布流布局(无限加载)

    js实现瀑布流布局(无限加载)

    这篇文章主要为大家详细介绍了js实现瀑布流布局,无限加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03

最新评论