如何移动 - 选择多个复选框，如GMail？ [英] How can I shift-select multiple checkboxes like GMail?
本文介绍了如何移动 - 选择多个复选框，如GMail？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在GMail中，用户可以点击电子邮件列表中的一个复选框，按住Shift键并选择第二个复选框。然后，JavaScript将选择/取消选择两个checbox之间的复选框。
我很好奇这是怎么完成的？这是JQuery还是一些基本的（或复杂的）JavaScript？ 我写了一个使用jquery的自包含演示： div class =snippet-code>
$（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 ）; var end = $ chkboxes.index（lastChecked）; $ chkboxes.slice（Math.min（start，end），Math.max（start，end）+ 1）.prop（'checked'，lastChecked.checked）; }};}）;
< ; script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jq uery.min.js>< /脚本>< HTML> < HEAD> < /头> <身体GT; < input type =checkboxid =id_chk1class =chkboxvalue =1/> Check 1< br />> < input type =checkboxid =id_chk2class =chkboxvalue =2/> Check 2< br /> < input type =checkboxid =id_chk3class =chkboxvalue =3/>检查3< br /> < input type =checkboxid =id_chk4class =chkboxvalue =4/>检查4< br /> < input type =checkboxid =id_chk5class =chkboxvalue =5/> Check 5< br /> < input type =checkboxid =id_chk6class =chkboxvalue =6/> Check 6< br /> < input type =checkboxid =id_chk7class =chkboxvalue =7/> Check 7< br /> < / body>< / html>
In GMail, the user can click on one checkbox in the email list, hold down the Shift key, and select a second checkbox. The JavaScript will then select/unselect the checkboxes that are between the two checboxes.
I am curious as to how this is done? Is this JQuery or some basic (or complex) JavaScript?
解决方案
I wrote a self-contained demo that uses 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>
这篇关于如何移动 - 选择多个复选框，如GMail？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
