JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script type="text/x-kendo-template" id="CheckboxTemplate">
    <li unselectable="on" class="k-item nowrap check-item">
        <input type="checkbox" name="#= text #" value="#= value #" class="check-input" #= selected ? "checked" : "" #/>
        <span>#= text #</span>
    </li>
</script>

<input id="dropDownList" style="width: 200px;"/>

JavaScript

$(document).ready(function () {

    var data = [
      { text: "Check All", value: "", selected: false },
      { text: "test1", value: "1", selected: false },
      { text: "test2", value: "2", selected: false },
      { text: "test3", value: "3", selected: true },
      { text: "test4", value: "4", selected: false }
      ];
                 
   dropdown = $("#dropDownList").kendoDropDownList({
       dataTextField: "text",
       dataValueField: "value",
       template: $("#CheckboxTemplate").html(),
       dataSource: data,
       placeholder: "Select...",
        select: function(e) {
            e.preventDefault();
        }
   }).data("kendoDropDownList");

    dropdown.list.find(".check-input,.check-item").bind("click", function(e) {
        var $item = $(this);
        var $input;
    
        if($item.hasClass("check-item"))
        {
            // Text was clicked
            $input = $item.children(".check-input");
            $input.prop("checked", !$input.is(':checked'));
        }
        else
            // Checkbox was clicked
            $input = $item;                                   
                                            
        // Check all clicked?
        if($input.val() == "")
            dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
        
        updateDropDown()

        e.stopImmediatePropagation();
    });

    updateDropDown();
});

function updateDropDown()
{
    var items= [];

    dropdown.list.find(".check-input").each(function() {
        var $input = $(this);
        if($input.val() != "" && $input.is(':checked'))
            items.push($input.next().text());
    });

    dropdown.text(items.toString());
}