Checkbox selector

faux multi select dropdown

by Cyberjetx

HTML

<table border=1>
  <thead>
    <tr>
      <th>
        <div id="list1" class="dropdown-check-list" tabindex="100">
          <span class="anchor">Select Fruits</span>
          <ul class="items"></ul>
        </div>
      </th>
    </tr>
  </thead>
  <tfoot></tfoot>
  <tbody>
    <tr>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Grapes</td>
    </tr>
    <tr>
      <td>Berry</td>
    </tr>
    <tr>
      <td>Mango</td>
    </tr>
  </tbody>
</table>

CSS

.dropdown-check-list {
  display: inline-block;
  text-align:left;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  position:absolute;
  background:white;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

.applyFilter{
    width:100%;
}

JavaScript

$('body').prepend(new Date() + "<hr/>");

$("body").off(".myNS");
$( "body" ).on( "click.myNS", ".anchor", function() {
	$(this).parent().find("ul").toggle();
});
$( "body" ).on( "click.myNS", ".applyFilter", function() {
	$(this).parent().toggle();
});

$("#list1 ul").append('<li><input type="checkbox" />Orange </li>');
$("#list1 ul").append('<li><input type="checkbox" />Grapes </li>');
$("#list1 ul").append('<li><input type="checkbox" />Berry </li>');
$("#list1 ul").append('<li><input type="checkbox" />Mango </li>');

$("#list1 ul").append('<button class="applyFilter">Apply</button></li>');

 

;(function ( $, window, document, undefined ) {

// Create the defaults once
    var checkboxDropdown = 'defaultPluginName',
        defaults = {
            label: "Select..."
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
    	var foo = this.element; 
        // this.element and this.options are available here
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[checkboxDropdown] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + checkboxDropdown)) {
                $.data(this, 'plugin_' + checkboxDropdown, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );