Bagaimana saya bisa menggeser-pilih beberapa kotak centang seperti GMail?

86

Di Gmail, pengguna dapat mengklik satu kotak centang di daftar email, menahan tombol Shift, dan memilih kotak centang kedua. JavaScript kemudian akan memilih / membatalkan pilihan kotak centang yang ada di antara dua kotak centang.

Saya penasaran bagaimana ini dilakukan? Apakah ini JQuery atau JavaScript dasar (atau rumit)?

javascript gmail Ascalonian
sumber
4
Mudah menemukan inti untuk jawaban @ BC. Gist.github.com/3784055
Andy Ray

Jawaban:

184

Saya menulis demo mandiri yang menggunakan 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>
Luaskan cuplikan

SM.
sumber
8
Anda dapat memanggil slice daripada menggunakan for loop. Ini akan terlihat seperti ini: "$ ('. Chkbox'). Slice (min ..., max ... + 1) .attr ('Check', lastChecked.checked)"
Matthew Crumley
10
Jawabannya timpang tanpa plugin jquery abstrak. Jadi ini dia gist.github.com/3784055
Andy Ray
3
Sepertinya tidak berhasil untuk melakukan shift-klik beberapa kali setelah menghapus centang beberapa kotak tanpa shift-klik. jsfiddle.net/5fG5b
Greg Pettit
3
Itu karena seharusnya .prop('checked', tidak .attr('checked'. jsFiddle: jsfiddle.net/dn4jv9a5
caitlin
3
@schnauss terima kasih, kamu benar dan saya sudah update jawabannya. Dalam pembelaan saya, jawaban asli ditulis sebelum prop () tersedia
BC.
36

Ini dilakukan melalui javascript yang cukup sederhana.

Mereka melacak id dari kotak centang terakhir dan ketika kotak centang lain dicentang mereka menggunakan atribut acara shiftKey untuk melihat apakah shift ditahan saat mengklik kotak centang. Jika demikian, mereka menyetel properti yang dicentang dari setiap kotak centang di antara keduanya menjadi benar.

Untuk menentukan kapan sebuah kotak dicentang mereka mungkin menggunakan event onclick pada kotak centang tersebut

Ben S
sumber
2
Jika mau, Anda dapat menggunakan referensi ini dari Mozilla Developer Network: atribut event shiftKey , Properti elemen input , onclick .
PhoneixS
14

Baru-baru ini, saya menulis plugin jQuery yang menyediakan fitur itu dan banyak lagi.

Setelah memasukkan plugin, Anda hanya perlu menginisialisasi konteks kotak centang dengan cuplikan kode berikut:

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

Berikut ini tautan ke dokumentasi, demo & unduh: http://rmariuzzo.github.io/checkboxes.js/

Rubens Mariuzzo
sumber
10

Sepertinya setiap jawaban yang dapat saya temukan online sepenuhnya bergantung pada jQuery untuk ini. JQuery menambahkan sedikit fungsionalitas. Berikut versi cepat yang tidak memerlukan kerangka kerja apa pun:

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

Dan kemudian inisialisasi kapan pun Anda membutuhkannya:

allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')
Ben D
sumber
3

Dapatkan solusi ini dari http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ (sekarang mati) :

JavaScript dan kode HTML

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

Adnan
sumber
Tautan domain tidak lagi digunakan.
Zaren Wienclaw
2

Terinspirasi oleh jawaban bagus yang diberikan, berikut ini versi JavaScript biasa yang digunakan Array.prototypeuntuk memaksa nodelist menggunakan fungsi array, bukan forloop.

(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>
Luaskan cuplikan

bloodyKnuckles
sumber
Bagaimana cara meningkatkan dengan fungsi hapus pilihan?
RSH
2

Saya benar-benar menyukai contoh gyo dan menambahkan beberapa kode sehingga berfungsi pada semua kotak centang dengan nama yang sama.

Saya juga menambahkan MutationObserver sehingga acara juga ditangani pada kotak centang yang baru ditambahkan.

$(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>
Luaskan cuplikan

Gerben Versluis
sumber
1

Saya mengambil versi jQuery dari @BC. dan mengubahnya menjadi versi ES6, karena kodenya sebenarnya cukup elegan untuk menyelesaikan masalah, jika ada yang masih tersandung pada ini ... 

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

  • Menemukan solusi yang lebih baik yang berfungsi untuk kotak centang pilih dan hapus pilihan.

  • Menggunakan inti 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>
Luaskan cuplikan

Yogesh Kapadne
sumber
0

Berikut ini juga implementasi lain yang mirip dengan beberapa pilihan Pandangan.

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

Ini adalah solusi jquery yang saya tulis dan gunakan:

  • Semua kotak centang memiliki nama kelas yang sama chksel
  • Untuk pemilihan individu yang lebih cepat, sebuah kelas akan membawa urutan bernama chksel_index

  • Juga masing-masing checkboxmemiliki atribut bernama rgyang berisi indeks yang sama

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

solusi ini berfungsi untuk saya, juga berbasis ajax untuk 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>
mempesona
sumber
0

Berikut adalah implementasi Elegan. Idenya adalah untuk menyimpan input pertama yang dipilih ke variabel lastChecked dan ketika pengguna memilih field input dengan shiftKey, kita akan menjalankan perulangan dan mengaktifkan inBetween (boolean) dan menandai semua kotak centang dengan nilai sebenarnya. Terinspirasi oleh 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>
MVS KIRAN
sumber