Wie kann ich mehrere Kontrollkästchen wie GMail bei gedrückter Umschalttaste auswählen?

85

In GMail kann der Benutzer auf ein Kontrollkästchen in der E-Mail-Liste klicken, die Umschalttaste gedrückt halten und ein zweites Kontrollkästchen aktivieren. Das JavaScript aktiviert / deaktiviert dann die Kontrollkästchen zwischen den beiden Kontrollkästchen.

Ich bin gespannt, wie das geht? Ist das JQuery oder ein einfaches (oder komplexes) JavaScript?

javascript gmail Ascalonian
quelle
4
Einfache Suche nach der Antwort von @ BC. gist.github.com/3784055
Andy Ray

Antworten:

179

Ich habe eine eigenständige Demo geschrieben, die jquery verwendet:

$(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>
Erweitern Sie das Snippet

BC.
quelle
8
Sie können Slice aufrufen, anstatt die for-Schleife zu verwenden. Es würde so aussehen: "$ ('. Chkbox'). Slice (min ..., max ... + 1) .attr ('geprüft', lastChecked.checked)"
Matthew Crumley
9
Die Antwort ist ohne abstrahiertes JQuery-Plugin lahm. Also los geht's gist.github.com/3784055
Andy Ray
3
Scheint nicht zu funktionieren, wenn Sie mehrmals einen Umschaltklick ausführen, nachdem Sie einige Kontrollkästchen ohne Umschaltklick deaktiviert haben. jsfiddle.net/5fG5b
Greg Pettit
3
Das liegt daran, dass es .prop('checked'nicht so sein sollte .attr('checked'. jsFiddle: jsfiddle.net/dn4jv9a5
caitlin
3
@schnauss danke, du hast recht und ich habe die Antwort aktualisiert. Zu meiner Verteidigung wurde die ursprüngliche Antwort geschrieben, bevor prop () verfügbar war
BC.
36

Dies geschieht durch ziemlich einfaches Javascript.

Sie verfolgen die ID des zuletzt aktivierten Kontrollkästchens. Wenn ein anderes Kontrollkästchen aktiviert ist, verwenden sie das Ereignisattribut shiftKey, um festzustellen , ob beim Klicken auf das Kontrollkästchen die Umschalttaste gedrückt wurde. In diesem Fall setzen sie die markierte Eigenschaft jedes Kontrollkästchens zwischen den beiden auf true.

Um festzustellen, wann ein Kontrollkästchen aktiviert ist, verwenden sie wahrscheinlich ein Ereignis onclick für die Kontrollkästchen

Ben S.
quelle
2
Wenn Sie möchten, können Sie diese Referenzen aus dem Mozilla Developer Network verwenden: shiftKey-Ereignisattribut , Eigenschaften von Eingabeelementen , onclick .
PhoneixS
14

Kürzlich habe ich ein jQuery-Plugin geschrieben, das diese und weitere Funktionen bietet.

Nachdem Sie das Plugin eingefügt haben, müssen Sie nur den Kontext der Kontrollkästchen mit dem folgenden Codeausschnitt initialisieren:

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

Hier ist der Link zur Dokumentation, Demo und zum Download: http://rmariuzzo.github.io/checkboxes.js/

Rubens Mariuzzo
quelle
10

Es scheint, dass jede Antwort, die ich online finden kann, vollständig von jQuery abhängt. JQuery fügt sehr wenig Funktionalität hinzu. Hier ist eine schnelle Version, für die keine Frameworks erforderlich sind:

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

Und initialisieren Sie es dann, wann immer Sie es brauchen:

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

Habe diese Lösung von http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ erhalten (jetzt tot) :

JavaScript und 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>
Erweitern Sie das Snippet

Adnan
quelle
Die Links-Domain wird nicht mehr verwendet.
Zaren Wienclaw
2

Inspiriert von den guten Antworten finden Sie hier eine einfache JavaScript-Version, mit Array.prototypeder Knotenlisten gezwungen werden, Array-Funktionen anstelle von forSchleifen zu verwenden.

(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>
Erweitern Sie das Snippet

blutige Knöchel
quelle
Wie kann ich mich mit der Funktion zum Abwählen verbessern?
RSH
1

Ich habe die jQuery-Version von @BC genommen. und verwandelte es in eine ES6-Version, da der Code das Problem tatsächlich ziemlich elegant löst, falls noch jemand darauf stößt ... 

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;
  } ) );
}
Moritz Friedrich
quelle
1

Ich mochte das Beispiel von gyo wirklich und fügte Code hinzu, damit es auf allen Kontrollkästchen mit demselben Namen funktioniert.

Ich habe auch einen MutationObserver hinzugefügt, damit Ereignisse auch in neu hinzugefügten Kontrollkästchen behandelt werden.

$(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>
Erweitern Sie das Snippet

Gerben Versluis
quelle
0

Hier ist auch eine andere Implementierung ähnlich der Mehrfachauswahl von Outlook.

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

vasgen
quelle
0

Dies ist eine Abfragelösung, die ich geschrieben und verwendet habe:

  • Alle Kontrollkästchen haben dieselbe Klasse chksel
  • Zur schnelleren individuellen Auswahl trägt eine Klasse die angegebene Reihenfolge chksel_index

  • Außerdem hat jedes checkboxAttribut einen Namen rg, der denselben Index enthält

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

    })

Dan
quelle
0

  • Es wurde die bessere Lösung für das Aktivieren und Deaktivieren von Kontrollkästchen gefunden.

  • Verwendet ein Kern-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>
Erweitern Sie das Snippet

Yogesh Kapadne
quelle
0

Diese Lösung funktioniert für mich, auch Ajax-basiert für 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>
dazzafact
quelle