JQuery DropDownList

Set the checkboxes property of the jqxDropDownButton. Author: http://jqwidgets.com Author: http://jqwidgets.com

by txhi

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxDropDownList'></div>

JavaScript

var data = [
  "Affogato",
  "Americano",
  "Bicerin",
  "Breve",
  "Café Bombón",
  "Café au lait"];
// Create a jqxDropDownList
data.splice(0, 0, '(Select All)');

$("#jqxDropDownList").jqxDropDownList({
  source: data,
  selectedIndex: 3,
  theme: 'energyblue',
  checkboxes: true,
  filterable: true,
  /**/
  selectionRenderer: function () {
    var checkedItems = $("#jqxDropDownList").jqxDropDownList('getCheckedItems');
    
    var array = [];
    
    if (checkedItems.length != 0) {
    	for (var i in checkedItems) {
        var itemValue = checkedItems[i].value; 
        if (itemValue != '(Select All)' && array.indexOf(itemValue) == -1) {
          array.push(itemValue);
        }
        
      }
      return "<b>" + array.toString() + "</b>";
    }
    return "<b>Please Choose:</b>";
  }
  
});

var handleCheckChange = true;
$("#jqxDropDownList").on('checkChange', function (event) {
  if (!handleCheckChange)
    return;
  if (event.args.label != '(Select All)') {
    handleCheckChange = false;
    $("#jqxDropDownList").jqxDropDownList('checkIndex', 0);
    var checkedItems = $("#jqxDropDownList").jqxDropDownList('getCheckedItems');
    var items = $("#jqxDropDownList").jqxDropDownList('getItems');
    if (checkedItems.length == 1) {
      $("#jqxDropDownList").jqxDropDownList('uncheckIndex', 0);
    }
    else if (items.length != checkedItems.length) {
      $("#jqxDropDownList").jqxDropDownList('indeterminateIndex', 0);
    }
    handleCheckChange = true;
  }
  else {
    handleCheckChange = false;
    if (event.args.checked) {
      $("#jqxDropDownList").jqxDropDownList('checkAll');
    }
    else {
      $("#jqxDropDownList").jqxDropDownList('uncheckAll');
    }
    handleCheckChange = true;
  }
});