0

我正在处理一个包含人员列表的页面。用户需要能够选择一行或多行。我希望该页面的行为类似于 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 中发现的“错误”也存在于 Firefox 和 IE 中，我只是没有注意。而且我不确定这是一个错误，但我仍然无法弄清楚如何绕过它。当我单击标签时，一切正常。当我单击复选框时，在使用控制键时，事情并没有那么好。

我认为这可以追溯到这样一个事实，即当您控制或切换时，单击标签不会激活内部的复选框，而没有 javascript。这阻碍了我使用 .change 而不是 .click 的尝试。有什么想法吗？

4

1 回答 1

0

我想出了解决问题的方法，但这是一个破解的答案，所以我仍然愿意接受更好的选择。基本上，我添加了一个悬停在复选框顶部的不可见 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/

于 2013-04-04T17:58:23.483 回答