Question

我正在处理一个包含人员列表的页面。用户需要能够选择一行或多行。我希望该页面的行为与Windows资源管理器类似，其中点击一次只能选择一个人，但是Control和Shift键允许多个选择。

我用jsFiddle编写了一个示例，据我所知，它正在使用Firefox和IE10。

var first_num;
var second_num;
var low_num;
var high_num;
var i;
var selected;
var multiple_lines_selected = 0;

$('label').click(function(e){
    if (e.shiftKey){
        multiple_lines_selected = 1;
        $('input').prop('checked', false);
        first_num = parseInt(selected.replace(' input','').replace('#n',''));
        second_num = parseInt($(this).attr('ID').replace('n',''));
        low_num = Math.min(first_num,second_num);
        high_num = Math.max(first_num,second_num);
        i = low_num;
        while (i<=high_num) {
            $('#n'+i +' input').prop('checked', true);
            i++;
        }
    }
    else if (e.ctrlKey){
        multiple_lines_selected = 1;
        selected = '#'+$(this).attr('ID') +' input';
        if (!$(selected).is(':checked')) {$(selected).prop('checked', true);}
        else {$(selected).prop('checked', false);}
    }
    else {
        selected = '#'+$(this).attr('ID') +' input';
        $('input').not(selected).prop('checked', false);
        if (multiple_lines_selected) {
            setTimeout(function(event){$(selected).prop('checked', true);});
        }
        multiple_lines_selected = 0;
    }
});
$('label').mousedown(function(e){
    window.getSelection().removeAllRanges();
});

HTML只是一个重复的

<label id="n1" class="row">
    <input type="checkbox" />Person 1
</label>

我感谢任何建议或帮助！

链接到jsFiddle：http://jsfiddle.net/mExp4/1/

编辑1 ：在Chrome上，我发现了一个奇怪的错误。如果我在按住控制键的同时单击该行，则一切都按预期运行。但是，如果我点击实际的复选框，则没有任何变化。想法？

编辑2 ：我在Chrome中找到的“bug”也存在于Firefox和IE中，我只是没有注意。而且我不确定这是一个错误，但我仍然无法弄清楚如何绕过它。当我点击标签时，一切正常。当我单击复选框时，使用控制键时，事情不能很好地工作。

我认为这可以追溯到这样一个事实：当你持有控制或转移时，如果没有javascript，点击标签将不会激活内部的复选框。这阻碍了我尝试使用.change而不是.click。有什么想法吗？

Answer 1

我找到了解决问题的方法，但这是一个被黑的答案，所以我仍然愿意接受更好的选择。基本上，我添加了一个隐藏在复选框顶部的div。它在内部，所以点击它仍然激活复选框。然而，它会通过标签激活它，而不是同时激活标签和复选框。

为了不使用javascript的用户，它从display:none开始，并由脚本显示。这里的一个目标是让一个人在被禁用时优雅。

.checkbox_overlay {
    height:40px;
    width:20px;
    display:none;
    position:absolute;
    margin-top:-10px;
    float:left;
}

<label id="n1" class="row">
    <div class="checkbox_overlay"></div>
    <input type="checkbox" />Person 1
</label>

工作示例：http://jsfiddle.net/mExp4/4/

使用Control＆amp ;;更改列表选择的行为使用jQuery优化移位键 - 更新2

1 个答案: