在 GMail 中，用户可以单击电子邮件列表中的一个复选框，按住 Shift 键，然后选择第二个复选框。然后 JavaScript 将选择/取消选择两个复选框之间的复选框。
我很好奇这是怎么做到的？这是 JQuery 还是一些基本（或复杂）的 JavaScript？
如何移动选择多个复选框，如 GMail？
IT技术
javascript
gmail
2021-02-25 11:20:49
6个回答
我写了一个使用 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 完成的。
他们跟踪最后一个复选框的 id，当另一个复选框被选中时，他们使用shiftKey 事件属性来查看在单击复选框时是否保持了 shift。如果是这样，他们将两者之间的每个复选框的选中属性设置为 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;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 Field Plug-In
其它你可能感兴趣的问题