javascript使用shift+click实现选择和反选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程序设计有所帮助。

赞 (0)

相关推荐

  • 使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法

    今天工作中遇到个小问题,情况如下,当我在后台页面中设置Checkbox的Enable的值为false时,我在前端页面中使用脚本(chk.disabled = false),无法改变disabled的值为false,代码如下: 前台代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script

  • javascript使用avalon绑定实现checkbox全选

    javascript使用avalon绑定实现checkbox全选

    duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

  • jquery判断至少有一个checkbox被选中的方法

    本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -

  • javascript使用shift+click实现选择和反选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

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • JavaScript使用shift方法移除素组第一个元素实例分析

    本文实例讲述了JavaScript使用shift方法移除素组第一个元素的用法.分享给大家供大家参考.具体如下: JS中我们可以通过pop方法移除数组的最后一个元素,可以通过shift方法移除数组的第一个元素 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to remove the first element of the array.</p> <

  • JavaScript实现表单全选或反选效果

    JavaScript实现表单全选或反选效果

    本文实例为大家分享了JavaScript实现表单全选或反选的具体代码,供大家参考,具体内容如下 表单中常常会用到checkbox复选框,通过复选框做出的列表全选或全不选的效果也是很常见的,比如购物车的商品列表,所以本篇也是对这一种常见功能的选择效果及其底层的实现思路及代码进行介绍.演示与分析,下面上JS代码: <script> // 表单的全选与全不选案例:注:checkbox复选框的checked属性值为true则为选中状态,为false则为未选中状态 var j_cbAll = docum

  • javascript基于DOM实现权限选择实例分析

    本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &

  • javascript实现简单的全选和反选功能

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • 详解JavaScript中shift()方法的使用

    JavaScript数组shift()方法删除数组中的第一个元素,并返回该元素. 语法 array.shift(); 下面是参数的详细信息: NA 返回值: 返回数组中删除单个值. 例子: <html> <head> <title>JavaScript Array shift Method</title> </head> <body> <script type="text/javascript"> va

  • jQuery实现复选框批量选择与反选的方法

    本文实例讲述了jQuery实现复选框批量选择与反选的方法.分享给大家供大家参考.具体实现方法如下: function selectAll(){ $('input[type|=checkbox]').attr('checked','checked'); } function cancelAll(){ $('input[type|=checkbox]').removeAttr('checked'); } 希望本文所述对大家的jQuery程序设计有所帮助.

  • javaScript实现复选框全选反选事件详解

    javaScript实现复选框全选反选事件详解

    本文实例为大家分享了javaScript实现复选框全选反选的具体代码,供大家参考,具体内容如下 代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title

  • JavaScript实现点击自动选择TextArea文本的方法

    本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascript程序设计有所帮助.

随机推荐