A Pen by Ondřej Králík.

index.html

<div style="width: 300px;">
  
  <div style="padding: 10px 0 0"><h3>Multi select</h3></div>

    <div class="multiSelect" style="width: 150px;">
      <div style="position:relative; display:inline-block; ">
        <div id="selectBox">
          <select style="width: 150px;">
            <option value="choosed">Choose value...</option>
          </select>

          <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
        </div>
      </div>

      <div id="checkboxes" style="display: none; border: 1px #aaa solid; margin-top:-1px; z-index:1; position: absolute; background: #fff; width: 148px;">
        <div><input type="checkbox" id="ch1"><label for="ch1">one</label></div>    
        <div><input type="checkbox" id="ch2"><label for="ch2">two</label></div>    
        <div><input type="checkbox" id="ch3"><label for="ch3">three</label></div>
      </div>
    </div>

  <div style="border: 1px solid grey; margin: 5px 0; padding: 2px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
    
</div>
  

Multi-checkbox-combo.markdown

Multi checkbox combo

A Pen by Ondřej Králík on CodePen.

License.

script.js

$(function(){

  var expanded = false;  
  $('#selectBox').click(function(e) {
    if (expanded) {
      $('#checkboxes').hide();
      expanded = false;
    } else {
      $('#checkboxes').show();
      expanded = true;
    }
  });


// VARIANT 1
//   var selectedCheckboxes = 0;  
//   $('.multiSelect :checkbox').change(function(e) {
//     if (this.checked) {
//       selectedCheckboxes++;
//     } else {
//       selectedCheckboxes--;
//     }
//     $('#selectBox select option').text(selectedCheckboxes + " value(s) selected");    
//   });
  
  
  
// VARIANT 2  
    $('.multiSelect :checkbox').change(function(e) {
      
      var str = "";
      $('.multiSelect :checkbox').each(function(){
        if (this.checked) {
          str += $(this).next('label').text() + ", ";
        }
      });
      str = str.substring(0, str.length - 2);
      
      if (str === "") {
        str = "Choose value...";
      }
      
      $('#selectBox select option').text(str);    
    });
});