Javascript 如何按住shift键并选择多个复选框（如GMail）？

在GMail中，用户可以单击电子邮件列表中的一个复选框，按住Shift键，然后选择第二个复选框。然后JavaScript将选择/取消选择两个复选框之间的复选框

---

我很好奇这是怎么做到的？这是JQuery还是一些基本（或复杂）的JavaScript？

这是通过相当简单的JavaScript完成的

他们跟踪最后一个复选框的id，当选中另一个复选框时，他们使用查看在单击复选框时是否按住了shift键。如果是这样，他们将两个复选框之间的每个复选框的值设置为true

---

为了确定复选框何时被选中，他们可能会在复选框上使用事件，这是通过相当简单的javascript完成的

他们跟踪最后一个复选框的id，当选中另一个复选框时，他们使用查看在单击复选框时是否按住了shift键。如果是这样，他们将两个复选框之间的每个复选框的值设置为true

---

为了确定复选框何时被选中，他们可能会在复选框上使用事件

我编写了一个使用jquery的自包含演示：

$（文档）.ready（函数（）{
变量$chkboxes=$（'.chkbox'）；
var lastChecked=null；
$chkboxes.单击（函数（e）{
如果（！lastChecked）{
lastChecked=这个；
返回；
}
如果（如换档键）{
var start=$chkboxes.index（此）；
var end=$chkboxes.index（最后选中）；
$chkboxes.slice（Math.min（开始，结束），Math.max（开始，结束）+1.prop（'checked'，lastChecked.checked）；
}
lastChecked=这个；
});
});

检查1

检查2

检查3

检查4

检查5

检查6

检查7

我编写了一个使用jquery的自包含演示：


$（文档）.ready（函数（）{
变量$chkboxes=$（'.chkbox'）；
var lastChecked=null；
$chkboxes.单击（函数（e）{
如果（！lastChecked）{
lastChecked=这个；
返回；
}
如果（如换档键）{
var start=$chkboxes.index（此）；
var end=$chkboxes.index（最后选中）；
$chkboxes.slice（Math.min（开始，结束），Math.max（开始，结束）+1.prop（'checked'，lastChecked.checked）；
}
lastChecked=这个；
});
});

检查1

检查2

检查3

检查4

检查5

检查6

检查7

从获得此解决方案（现已死亡）：

JavaScript和HTML代码


var NUM_box=10；
//用户单击的最后一个复选框
var last=-1；
功能检查（事件）{
//在IE中，事件对象是窗口对象的属性
//在Mozilla中，事件对象作为参数传递给事件处理程序
如果（！event）{event=window.event}
var num=parseInt（/box\[（\d+）\]/.exec（this.name）[1]）；
if（event.shiftKey&&last！=-1）{
var di=num>last？1:-1；
for（变量i=last；i！=num；i+=di）{
document.forms.box['box['+i+']']].checked=true；
}
}
last=num；
}
函数init（）{
对于（变量i=0；i


从获得此解决方案（现已死亡）：

JavaScript和HTML代码


var NUM_box=10；
//用户单击的最后一个复选框
var last=-1；
功能检查（事件）{
//在IE中，事件对象是窗口对象的属性
//在Mozilla中，事件对象作为参数传递给事件处理程序
如果（！event）{event=window.event}
var num=parseInt（/box\[（\d+）\]/.exec（this.name）[1]）；
if（event.shiftKey&&last！=-1）{
var di=num>last？1:-1；
for（变量i=last；i！=num；i+=di）{
document.forms.box['box['+i+']']].checked=true；
}
}
last=num；
}
函数init（）{
对于（变量i=0；i

嗯，这篇文章很老了，但我刚刚遇到了一个解决方案：
嗯，这篇文章很老了，但我刚刚遇到了一个解决方案：
这是我编写并使用的jquery解决方案：


所有复选框都有相同的类，名为
chksel
为了更快地进行个人选择，一个类将进行排序
命名
chksel\u索引
此外，每个
复选框
都有一个名为
rg
的属性，该属性包含相同的
索引

var chksel_last=-1；
$（'.chksel'）。单击（函数（ev）{
如果（ev.shiftKey）{var i=0；
如果（chksel_last>=0）{
如果（$（this）.attr（'rg'）>=chksel\u last）{
对于（i=chksel_last；i这是我编写并使用的jquery解决方案：


所有复选框都有相同的类，名为
chksel
为了更快地进行个人选择，一个类将进行排序
命名
chksel\u索引
此外，每个
复选框
都有一个名为
rg
的属性，该属性包含相同的
索引

var chksel_last=-1；
$（'.chksel'）。单击（函数（ev）{
如果（ev.shiftKey）{var i=0；
如果（chksel_last>=0）{
如果（$（this）.attr（'rg'）>=chksel\u last）{
对于（i=chksel_last；i最近，我编写了一个jQuery插件，提供了该功能以及更多功能

包含插件后，只需使用以下代码段初始化复选框的上下文：

$('#table4').checkboxes({ range: true });

这里是文档、演示和下载的链接：
最近，我编写了一个jQuery插件，提供了该功能和更多功能

包含插件后，只需使用以下代码段初始化复选框的上下文：

$('#table4').checkboxes({ range: true });

这里是文档、演示和下载的链接：
这里还有另一个链接
    <script type="text/javascript">

function inRange(x, range)
{
    return (x >= range[0] && x <= range[1]);
}

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var firstClick = 1;
    var lastClick = null;
    var range = [];

    $chkboxes.click(function(e) {
        if(!e.shiftKey && !e.ctrlKey) {

            $('#index-' + firstClick).prop('checked', false);

            firstClick = $chkboxes.index(this) + 1;

            if (firstClick !== null && firstClick !== ($chkboxes.index(this)+1)) {
                $('#index-' + firstClick).prop('checked', true);
            }
        } else if (e.shiftKey) {
            lastClick = $chkboxes.index(this) + 1;
            if ((firstClick < lastClick) && !inRange(lastClick, range)) {
                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            } else if ((firstClick > lastClick) && !inRange(lastClick, range)) {
                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            } else if ((firstClick < lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            }else if ((firstClick > lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            }
        }
    });
});

function allow_group_select_checkboxes(checkbox_wrapper_id){
    var lastChecked = null;
    var checkboxes = document.querySelectorAll('#'+checkbox_wrapper_id+' input[type="checkbox"]');

    //I'm attaching an index attribute because it's easy, but you could do this other ways...
    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].setAttribute('data-index',i);
    }

    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener("click",function(e){

            if(lastChecked && e.shiftKey) {
                var i = parseInt(lastChecked.getAttribute('data-index'));
                var j = parseInt(this.getAttribute('data-index'));
                var check_or_uncheck = this.checked;

                var low = i; var high=j;
                if (i>j){
                    var low = j; var high=i; 
                }

                for(var c=0;c<checkboxes.length;c++){
                    if (low <= c && c <=high){
                        checkboxes[c].checked = check_or_uncheck;
                    }   
                }
            } 
            lastChecked = this;
        });
    }
}

allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')

function enableGroupSelection( selector ) {
  let lastChecked = null;
  const checkboxes = Array.from( document.querySelectorAll( selector ) );

  checkboxes.forEach( checkbox => checkbox.addEventListener( 'click', event => {
    if ( !lastChecked ) {
      lastChecked = checkbox;

      return;
    }

    if ( event.shiftKey ) {
      const start = checkboxes.indexOf( checkbox );
      const end   = checkboxes.indexOf( lastChecked );

      checkboxes
        .slice( Math.min( start, end ), Math.max( start, end ) + 1 )
        .forEach( checkbox => checkbox.checked = lastChecked.checked );
    }

    lastChecked = checkbox;
  } ) );
}

<table id="dataTable">

<tbody>
<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>

<script>
$(document).ready(function() {
   var $chkboxes = $('#dataTable');
var $range = '#dataTable tbody';
var $first = false;
var $indexWrapp = 'tr';
var lastChecked = null;
var $checkboxes = 'input[type="checkbox"]';

$chkboxes.on('click',$checkboxes,function(e) {

    if ($first===false) {

        lastChecked = $(this).closest($indexWrapp).index();
        lastCheckedInput = $(this).prop('checked');
        $first=true;
        return;
    }

    if (e.shiftKey) {

        var start = lastChecked;
        var end =  $(this).closest($indexWrapp).index();

       $( $range+' '+$indexWrapp).each(function() {
          $currIndex=$(this).index();
          if( $currIndex>=start && $currIndex<=end ){
              $(this).find($checkboxes).prop('checked', lastCheckedInput);
          }

       })
    }

     lastCheckedInput = $(this).prop('checked');
     lastChecked = $(this).closest($indexWrapp).index();
});
</script>