JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="icon-holder jadento-custom-select">
    <span class="uk-form-icon" data-uk-icon="icon: chevron-down"></span>
    <div class="uk-select uk-input select-result" type="button">auswählen</div>
    <div data-uk-dropdown="mode: click">
        <label><input name="behandlungsart" class="uk-radio" type="checkbox" checked> Bleaching</label>
        <label><input name="behandlungsart" class="uk-radio" type="checkbox"> Venners</label>
        <label><input name="behandlungsart" class="uk-radio" type="checkbox"> Implantate</label>
    </div>                                                    
</div>

JavaScript

(function($) {

  const customSelects = {
    init: function() {
      this.initCheckboxes();
    },
    initCheckboxes: function() {
      var self = this;

      $(".jadento-custom-select").each(function() {
        var thisSelect = $(this).find("[data-uk-dropdown]");

        self.pushItems();

        $(thisSelect).find("label").on("click", function() {
          self.pushItems();
        });
      });
    },
    pushItems: function() {
      var self = this;

      $(".jadento-custom-select").each(function() {
        var thisSelect = $(this).find("[data-uk-dropdown]");
        var checkedItemsArray = [];

        $(thisSelect).find("input").each(function() {
          if ($(this).is(":checked")) {
            var text = $(this).parent().text();
            checkedItemsArray.push($.trim(text));
          }
        });

        $(thisSelect).prevAll(".select-result").text("auswählen");

        if (checkedItemsArray.length) {
          var checkedItems = checkedItemsArray.join(', ');

          if (1 < checkedItemsArray.length) {
            var lastItem = checkedItemsArray[checkedItemsArray.length - 1];
            checkedItemsArray.splice(-1, 1);

            checkedItems = checkedItemsArray.join(', ');
            checkedItems += " und " + lastItem;
          }

          $(thisSelect).prevAll(".select-result").text(checkedItems);
        }
      });

    },
  }


  customSelects.init();
})(jQuery);