如何移动select多个checkbox，如GMail？
在GMail中，用户可以点击邮件列表中的一个checkbox，按住Shift键并select第二个checkbox。 然后，JavaScript将select/取消select两个checbox之间的checkbox。
我很好奇这是怎么完成的？ 这是JQuery还是一些基本的（或复杂的）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', 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>
这是通过相当简单的JavaScript来完成的。
他们跟踪最后一个checkbox的ID，以及何时checkbox被选中时，他们使用shiftKey事件属性来查看是否在点击checkbox时保持了shift。 如果是这样的话，他们将每个checkbox的选中属性设置为true。
要确定一个盒子何时被检查，他们可能会在checkbox上使用一个onclick事件
最近，我写了一个提供该function和更多的jQuery插件。
包含插件后，您只需使用以下代码片段初始化checkbox的上下文：
$('#table4').checkboxes({ range: true });
这里是链接到文档，演示和下载： http : //rmariuzzo.github.io/checkboxes.js/
那么，这个post是相当古老，但这是我刚刚遇到的解决scheme： jQuery的字段插件
从http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ （现在已经死了）得到了这个解决scheme：
Javascript代码
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; } }
HTML
<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>
似乎每个我可以在网上find的答案是完全依赖jQuery的。 JQuery增加了很less的function。 这是一个不需要任何框架的快速版本：
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]')
这是我写和使用它的jQuery解决scheme：
（所有的checkbox都有一个名为chksel的类，为了更快的单独select一个类，它将chksel_index名为chksel_index的命令;每个checkbox都有一个名为rg的属性，它包含相同的索引）
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');} })
这也是另一个类似于Outlooks多选的实现。
<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]; } } }); });
受到所提供的良好答案的启发，这里是一个普通的JavaScript版本使用Array.prototype来强制节点列表使用数组函数，而不是循环。
<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> <script> (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 }) }) }()) </script>
WebpackBin示例
