kendoMultiSelectCheckBox
An extension to KendoUI's MultiSelect to allow toggling of values and a less tech savvy interface. NOTE: you must have a license of KendoUI Web to use this. It is not a stand-alone library
Demo: http://jsfiddle.net/jc4rp3nt3r/2E3xR/4/
Example Use:
<style>
.k-list-container .k-item {
cursor: pointer;
}
.k-list-container .k-item .k-icon {
background-color: #FFFFFF;
border-color: #AAA #444 #444 #AAA;
border-style: solid;
border-width: 1px;
border-radius: 5px;
margin-right: 4px;
width: 15px;
height: 15px;
}
.k-i-blank {
background-position: -99px -99px;
}
</style>
<input id="txtDemo" data-placeholder="Please Select... " value="1,2,3,4" />
<script src="./kendo.multiSelectCheckBox.js"></script>
<script>
$(function () {
$("#txtDemo").kendoMultiSelectCheckBox({
dataTextField: 'name',
dataValueField: 'id',
dataSource: new kendo.data.DataSource({
data: [
{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, { id: 6, name: 'Item 6' }, { id: 7, name: 'Item 7' }
]
}),
value: $("#txtDemo").val().split(",")
});
});
</script>