在GMail中,用户可以单击电子邮件列表中的一个复选框,按住Shift键,然后选择第二个复选框.然后,JavaScript将选择/取消选中两个checbox之间的复选框.
我很好奇这是怎么做到的？这是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;
});
});
Check 1
Check 2
Check 3
Check 4
Check 5
Check 6
Check 7
这是通过相当简单的JavaScript完成的.
它们跟踪最后一个复选框的ID,当选中另一个复选框时,它们使用shiftKey事件属性来查看是否在单击复选框时保持了shift.如果是这样,他们将两个复选框的checked属性设置为true.
要确定何时选中某个框,他们可能会在复选框上使用onclick事件
最近,我编写了一个提供该功能的jQuery插件.
包含插件后,您只需要使用以下代码段初始化复选框的上下文:
$('#table4').checkboxes({ range: true });
以下是文档,演示和下载的链接:http://rmariuzzo.github.io/checkboxes.js/
似乎我在网上找到的每个答案都完全依赖于jQuery.JQuery添加的功能非常少.这是一个不需要任何框架的快速版本:
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;ij){
var low = j; var high=i;
}
for(var c=0;c
然后在需要时初始化它:
allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')
京公网安备 11010802040832号 | 京ICP备19059560号-6 