如何切换 - 选择多个复选框,如GMail？

Question

如何切换 - 选择多个复选框,如GMail？

在GMail中,用户可以单击电子邮件列表中的一个复选框,按住Shift键,然后选择第二个复选框.然后,JavaScript将选择/取消选中两个checbox之间的复选框.

我很好奇这是怎么做到的？这是JQuery还是一些基本的(或复杂的)JavaScript？

Answer 1

我写了一个使用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;
    });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

答案是蹩脚的,没有抽象的jquery插件.所以在这里你去https://gist.github.com/3784055 (9认同)
您可以调用slice而不是使用for循环.它看起来像这样:"$('.chkbox').slice(min ...,max ... + 1).attr('checked',lastChecked.checked)" (8认同)
在没有按住Shift键单击的情况下取消选中某些框后,似乎无法进行多次移位点击.http://jsfiddle.net/5fG5b/ (3认同)
那是因为它应该是`.prop('checked'`,而不是`.attr('checked'`.jsFiddle:http://jsfiddle.net/dn4jv9a5/ (3认同)
@schnauss谢谢你,你是对的,我已经更新了答案.在我的辩护中,原始答案是在prop()可用之前编写的 (3认同)

Answer 2

Ben*_*n S 36

这是通过相当简单的JavaScript完成的.

它们跟踪最后一个复选框的ID,当选中另一个复选框时,它们使用shiftKey事件属性来查看是否在单击复选框时保持了shift.如果是这样,他们将两个复选框的checked属性设置为true.

要确定何时选中某个框,他们可能会在复选框上使用onclick事件

如果您愿意,可以使用Mozilla Developer Network中的这些引用:[shiftKey事件属性](https://developer.mozilla.org/en-US/docs/DOM/event.shiftKey),[输入元素属性](https ://developer.mozilla.org/en-US/docs/DOM/HTMLInputElement),[onclick](https://developer.mozilla.org/en-US/docs/DOM/element.onclick). (2认同)

Answer 3

Rub*_*zzo 14

最近,我编写了一个提供该功能的jQuery插件.

包含插件后,您只需要使用以下代码段初始化复选框的上下文:

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

Run Code Online (Sandbox Code Playgroud)

以下是文档,演示和下载的链接:http://rmariuzzo.github.io/checkboxes.js/

Answer 4

Ben*_*n D 7

似乎我在网上找到的每个答案都完全依赖于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;
        });
    }
}

Run Code Online (Sandbox Code Playgroud)

然后在需要时初始化它:

allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，7 月前
查看次数：	57499 次
最近记录：	6 年，5 月前