我需要使用复选框实现多选框。但问题是保持 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;
}
工作正常。但我也需要 ctrl 和 shift 键功能。请给出一些想法来实现这一点。
提前致谢。
答案 0 :(得分:2)
$.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
}