title: select multiple checkbox and append its value
body: <p>Here's the scenario, I have dynamic dropdown button that each time user select it will view the list of name with checkbox into a div;</p>
  
  <p><img src="https://i.stack.imgur.com/aiLj5.gif" alt="screenshot"></p>
  
  <p>if the checkbox is checked the value (ids) will append into textarea below; if unchecked it will remove the value.</p>
  
  <p><img src="https://i.stack.imgur.com/KHXz1.gif" alt="enter image description here">
  :</p>
  
  <p>Problem is every time I select into dropdown and checked an item, all text in textarea are removed. Here's my function:</p>
  
  <pre><code>(function($) {
      jQuery.fn.multiselect = function() {
          $(this).each(function() {
  
              var checkboxes = $(this).find("input:checkbox");
              var selectAll  = $(this).find("input[class='checkAll']");
  
              selectAll.off('click').on('click', function() {
                  $(this).closest('div').find(':checkbox').prop('checked', this.checked );
                  $(this).closest('div').find(':checkbox').parent().toggleClass("multiselect-on", this.checked);
              });
  
              checkboxes.each(function() {
                  var checkbox = $(this);
  
                  checkboxes.on('change', function() {
                     $(this).parent().toggleClass("multiselect-on", this.checked);
                     var string = checkboxes.filter(":checked").map(function(){
                        return this.value;
                     }).get().join(",");
  
                     $('#empid').val(string);
  
                  });
              });
          });
      };
      })(jQuery);
  </code></pre>
  
  <p>--thanks to @undefined minimizing the function ;)</p>
  
  <p>[UPDATED] function</p>
  
  <p>Function is now working accordingly with select all option. but the idea must be; if one of the item is unchecked the select all option must be unchecked!</p>
  
  <p>found the same idea in a plugins <a href="http://wenzhixin.net.cn/p/multiple-select/docs/" rel="nofollow noreferrer">Multiple Select</a> I want to include in the functions</p>
  
  <p>Please help enlighten me again! ;(</p>