jQuery Dropdown multi-select with select all functionality and color indicators

Demo

See the Pen Multiselect Dropdown – jQuery by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div class="msdd">
  <div class="msddTop"></div>
  <div class="msddMenu" style="display:none;">
    <ul>
      <li class="filterAll">
        <label><input name="filter" type="checkbox"> Filter All</label>
      </li>
      <li>
        <label><input name="menu" value="check1" type="checkbox"> <i></i> label 1</label>
      </li>
      <li>
        <label><input checked="true" name="menu" value="check2" type="checkbox"> <i></i> label 2</label>
      </li>
      <li>
        <label><input checked="true" name="menu" value="check3" type="checkbox"> <i></i> label 3</label>
      </li>
    </ul>
  </div>
</div>

CSS

.msdd {
  position: relative;
  width: 300px;
  display: inline-block;
}
.msdd .msddTop {
  border: 1px solid #cecece;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 5px;
  height: 20px;
  position: relative;
}
.msdd .msddTop:empty::after {
  content: "Select from options...";
  display: inline-block;
}
.msdd .msddTop span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eaeaea;
  display: inline-block;
  margin-right: 5px;
}
.msdd .msddTop span.check1 {
  background-color: red;
}
.msdd .msddTop span.check2 {
  background-color: green;
}
.msdd .msddTop span.check3 {
  background-color: blue;
}
.msdd .msddMenu {
  border: 1px solid #cecece;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 100%;
  box-sizing: border-box;
  display: none;
}
.msdd .msddMenu label {
  display: block;
  user-select: none;
}
.msdd .msddMenu .filterAll {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.msdd .msddMenu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.msdd .msddMenu ul li {
  padding: 0;
  margin: 0;
}
.msdd .msddMenu i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eaeaea;
  display: inline-block;
}
.msdd .msddMenu input[value=check1] + i {
  background-color: red;
}
.msdd .msddMenu input[value=check2] + i {
  background-color: green;
}
.msdd .msddMenu input[value=check3] + i {
  background-color: blue;
}

jQuery

const fillMsddTop = () => {
  $('.msddTop').find('span').remove();
  
  $("input:checkbox[name='menu']:checked").each(function(e){
    $(".msddTop").append("<span class='" + $(this).val() + "'></span>");
  });
}

$(document).ready(function(){
  if( $("input[name='menu']").is(":checked") ){
    fillMsddTop();
  }
  
  $( 'input[name="menu"]' ).change(function() {
    fillMsddTop();
  });
  
  $( 'input[name="filter"]' ).click(function() {
    if( $("input[name='filter']").is(":checked") ){
      $("input:checkbox[name='menu']:not(:checked)").each(function(){
        $(this).trigger('click');
      });
    }else{
       $("input:checkbox[name='menu']:checked").each(function(){
        $(this).trigger('click');
      });
    }
  });
  
  $( '.msddTop' ).click(function() {
    $('.msddMenu').fadeToggle();
  });
  
  $('html').click(function(e) {
    if (e.target.class != '.msdd' && $(e.target).parents('.msdd').length == 0) {
      $('.msddMenu').hide();
    }
  });
});