jquery - 使用 CTRL 和 SHIFT 键功能在多选框中添加复选框

Question

我需要用复选框实现多选框。但问题是应该保留按住shift或ctrl按住并选择一个值块的功能。

我已经实现了添加复选框，但是通过按住ctrlorshift键来选择值不起作用。

HTML：

<div class="multSelect">
   <label><input type="checkbox" name="hotels[]" value="1">Value 1</label>
   <label><input type="checkbox" name="hotels[]" value="2">Value 2</label>
   <label><input type="checkbox" name="hotels[]" value="3">Value 3</label>
   <label><input type="checkbox" name="hotels[]" value="4">Value 4</label>
</div>

Javascript

$(function() {
        multiSelectWithCheckbox();
});

function multiSelectWithCheckbox() {

    jQuery('.multSelect').each(function(){
        var checkboxes = jQuery(this).find("input:checkbox");
        checkboxes.each(function(){
            if(jQuery(this).attr('checked'))
                jQuery(this).parent().addClass('selectColor');

            jQuery(this).click(function(){
                if(jQuery(this).attr('checked'))
                    jQuery(this).parent().addClass('selectColor');
                else
                    jQuery(this).parent().removeClass('selectColor');
            });
        });
    });
}

CSS

.multSelect {
    width:22em;
    height:30em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
.multSelect label{
    font-weight:normal;
    font-size:11px;
}
.selectColor {
    background-color: #3399FF;
}

它工作正常。但我也需要ctrl和shift关键功能。请给出一些想法来实现这一点。

提前致谢。

Answer 1

$.fn.multiSelect = function(o) {
    var defaults = {
        multiselect: true,
        selected: 'selected',
        filter:        ' > *',
        unselectOn:    false,
        keepSelection: true,
        list:            $(this).selector,
        e:                null,
        element:    null,
        start: false,
        stop: false,
        unselecting: false
    }

试试这个