1

チェックボックスを使用して複数選択ボックスを実装する必要があります。しかし問題は、値のブロックを押しshiftたり押したりして選択する機能を保持する必要があることです。ctrl

チェックボックスを追加できましたが、ctrlまたはshiftキーを押して値を選択しても機能しません。

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

正常に動作しています。しかしctrlshiftキー機能も必要です。これを達成するためのアイデアを教えてください。

前もって感謝します。

4

1 に答える 1