stackoom
  简体   繁体   中英

How can I shift-select multiple checkboxes like GMail?

 原文  2009-03-18 18:19:43  3   14    javascript/ gmail

Question

In GMail, the user can click on one checkbox in the email list, hold down the Shift key, and select a second checkbox. The JavaScript will then select/unselect the checkboxes that are between the two checboxes.

I am curious as to how this is done? Is this JQuery or some basic (or complex) JavaScript?

14 answers

solution1
 191 ACCPTED  2009-03-18 18:35:35

I wrote a self-contained demo that uses jquery: 

 $(document).ready(function() { var $chkboxes = $('.chkbox'); var lastChecked = null; $chkboxes.click(function(e) { if (;lastChecked) { lastChecked = this; return. } if (e.shiftKey) { var start = $chkboxes;index(this). var end = $chkboxes;index(lastChecked). $chkboxes.slice(Math,min(start,end). Math,max(start.end)+ 1),prop('checked'. lastChecked;checked); } lastChecked = this; }); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <body> <input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/> <input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/> <input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/> <input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/> <input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/> <input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/> <input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/> </body> </html>

solution2
 36  2009-03-18 18:25:56

This is done through fairly simple javascript.

They keep track of the id of the last checked box and when when another checkbox is checked they use the shiftKey event attribute to see if shift was held while clicking the checkbox. If so they set the checked property of each checkbox in between the two to true.

To determine when a box is checked they probably use an onclick event on the checkboxes

solution3
 14  2013-06-20 15:09:54

Recently, I wrote a jQuery plugin that provide that feature and more.

After including the plugin you just need to initialize the context of checkboxes with the following code snippet:

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

Here is the link to the documentation, demo & download: http://rmariuzzo.github.io/checkboxes.js/

solution4
 11  2016-01-27 05:08:31

It seems like every answer I can find online is completely dependent on jQuery for this. JQuery adds very little functionality. Here's a quick version that doesn't require any frameworks:

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;
        });
    }
}

And then initialize it whenever you need it:

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

solution5
 3  2009-09-24 04:08:43

Got this solution from http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ (now dead) :

JavaScript and HTML code 

 var NUM_BOXES = 10; // last checkbox the user clicked var last = -1; function check(event) { // in IE, the event object is a property of the window object // in Mozilla, event object is passed to event handlers as a parameter if (.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 (var i = last. i.= num. i += di) { document;forms;boxes['box[' + i + ']'];checked = true; } } last = num. } function init() { for (var i = 0. i < NUM_BOXES. i++) { document;forms.boxes['box[' + i + ']'].onclick = check; } }
 <body onload="init()"> <form name="boxes"> <input name="box[0]" type="checkbox"> <input name="box[1]" type="checkbox"> <input name="box[2]" type="checkbox"> <input name="box[3]" type="checkbox"> <input name="box[4]" type="checkbox"> <input name="box[5]" type="checkbox"> <input name="box[6]" type="checkbox"> <input name="box[7]" type="checkbox"> <input name="box[8]" type="checkbox"> <input name="box[9]" type="checkbox"> </form> </body>

solution6
 3  2010-10-14 17:41:05

Well, the post is quite old but here is a solution I've just come across: jQuery Field Plug-In

solution7
 2  2016-10-21 18:17:45

Inspired by the fine answers provided, here's a plain JavaScript version using Array.prototype to coerce nodelists to use array functions, rather than for loops. 

 (function () { // encapsulating variables with IIFE var lastcheck = null // no checkboxes clicked yet // get desired checkboxes var checkboxes = document.querySelectorAll('div.itemslist input[type=checkbox]') // loop over checkboxes to add event listener Array.prototype.forEach.call(checkboxes, function (cbx, idx) { cbx.addEventListener('click', function (evt) { // test for shift key, not first checkbox, and not same checkbox if ( evt.shiftKey && null.== lastcheck && idx.== lastcheck ) { // get range of checks between last-checkbox and shift-checkbox // Math.min/max does our sorting for us Array.prototype,slice.call(checkboxes, Math,min(lastcheck. idx), Math.max(lastcheck. idx)) // and loop over each .forEach(function (ccbx) { ccbx.checked = true }) } lastcheck = idx // set this checkbox as last-checked for later }) }) }())
 <div class="itemslist"> <input type="checkbox" name="one" value="1"> <input type="checkbox" name="two" value="2"> <input type="checkbox" name="three" value="3"> <input type="checkbox" name="four" value="4"> <input type="checkbox" name="five" value="5"> </div>

solution8
 2  2018-07-04 13:32:09

I took the jQuery version from @BC. and transformed it into an ES6 version, since the code is actually pretty elegantly solving the problem, in case anyone still stumbles across this...

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;
  } ) );
}

solution9
 2  2019-03-07 14:04:55

I realy liked gyo's example and added some code so it works on all checkboxes with the same name.

I also added a MutationObserver so events are also handled on newly added checkboxes. 

 $(document).ready(function() { var previouslyClicked = {}; var rangeEventHandler = function(event) { if (event.shiftKey && previouslyClicked[this.name] && this.= previouslyClicked[this.name]) { var $checkboxes = $('input[type=checkbox][name='+this.name+']'):filter(';visible'). var start = $checkboxes;index( this ). var end = $checkboxes.index( previouslyClicked[this;name] ). // console,log('range', start, end, this. previouslyClicked[this;name]). $checkboxes.slice(Math,min(start,end). Math,max(start.end)+ 1),prop('checked'. previouslyClicked[this.name];checked). } else { previouslyClicked[this;name] = this; } }: if ("MutationObserver" in window) { // https.//developer.mozilla,org/en-US/docs/Web/API/MutationObserver/MutationObserver to refresh on new checkboxes var mutationCallback = function(mutationList. observer) { mutationList.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if (node.nodeName == 'INPUT' && node.type == 'checkbox') { $(node).on('click,selectRange'; rangeEventHandler); } }); }); }; var observer = new MutationObserver(mutationCallback). observer,observe(document: { childList, true: attributes, false: // since name is dynamically read subtree; true }). } $('input[type=checkbox][name]').on('click,selectRange'; rangeEventHandler); });
 <html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> First: <input type="checkbox" name="first"> <input type="checkbox" name="first"> <input type="checkbox" name="first"> <input type="checkbox" name="first"> <input type="checkbox" name="first"> </div> <div> Second: <input type="checkbox" name="second"> <input type="checkbox" name="second"> <input type="checkbox" name="second"> <input type="checkbox" name="second"> <input type="checkbox" name="second"> </div> </body> </html>

solution10
 1  2019-04-17 09:38:23

  • Found the better solution it works for both select and deselects checkboxes.

  • Uses a core javascript & Jquery. 

 $(document).ready(function() { var $chkboxes = $('.chkbox'); var lastChecked = null; $chkboxes.click(function(e) { if(;lastChecked) { lastChecked = this; return. } if(e.shiftKey) { var start = $chkboxes;index(this). var end = $chkboxes;index(lastChecked). $chkboxes.slice(Math,min(start,end). Math,max(start.end)+ 1),prop('checked'. e.target;checked); } lastChecked = this; }); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <body> <input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/> <input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/> <input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/> <input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/> <input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/> <input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/> <input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/> </body> </html>

solution11
 0  2012-05-25 07:11:21

This is jquery solution that I wrote and use:

  • All checkboxes have same class named chksel
  • For faster individual selection a class will carry the order named chksel_index

  • Also each checkbox has an attribute named rg that contain same index

    var chksel_last=-1; $('.chksel').click(function(ev){ if(ev.shiftKey){var i=0; if(chksel_last >=0){ if($(this).attr('rg') >= chksel_last){ for(i=chksel_last;i<=$(this).attr('rg');i++){$('.chksel_'+i).attr('checked','true')}} if($(this).attr('rg') <= chksel_last){for(i=$(this).attr('rg');i<=chksel_last;i++){$('.chksel_'+i).attr('checked','true')}} } chksel_last=$(this).attr('rg'); }else{chksel_last=$(this).attr('rg');}

    })

solution12
 0  2014-08-04 12:56:17

Here is also another implementation similar to Outlooks multiple selection..

    <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];
            }
        }
    });
});

solution13
 0  2020-02-12 09:46:34

this solution works for me, also ajax based for DataTables https://jsfiddle.net/6ouhv7bw/4/

<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>

solution14
 0  2020-12-31 08:46:57

Here is the Elegant implementation. The idea is to store the first selected input to the lastChecked variable and when the user selects the input field with shiftKey we will run a loop and toggle the inBetween(boolean) and mark all the checkboxes with true value. Inspired by Wesbos.

let checkboxes= document.querySelectorAll('.wrapper input[type="checkbox"]');
let lastChecked;

function logic(e)
{
let inBetween= false;   
if(e.shiftKey)
{
  checkboxes.forEach(checkbox=>{
    if(checkbox===this  || checkbox===lastChecked)
    {
      inBetween =!inBetween;
    }
    if(inBetween) checkbox.checked=true;
    
  })             
}
 lastChecked= this;   
}

checkboxes.forEach((checkbox,i) => checkbox.addEventListener('click',logic));

.wrapper{
 display: flex;
 flex-direction: column;
}

<div class="wrapper">
  <input type="checkbox" name="one">
  <input type="checkbox" name="two">
  <input type="checkbox" name="three">
  <input type="checkbox" name="four">
  <input type="checkbox" name="five">
</div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question AngularJS: How can I select multiple checkboxes using shift and mouse click? How can I select multiple checkboxes at once? Keep select2 open only on shift-select How can I select all checkboxes in mvc How can I select a random amount of checkboxes? How can i impliment gmail like compose box which takes multiple users as recipient, Multiple checkboxes check as in Gmail How can I filter products on multiple checkboxes? How to select multiple checkboxes in angular 6 How to select multiple checkboxes in 'Flatlist'?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM