title: Bootstrap selector for multiselect- select all option
body: <p>So what i need is an select all option in multiple bootstrap selector as an option so i just create a select as </p>
  
  <pre><code>&lt;select class="form-control selectpicker" multiple&gt;
     &lt;option value="all"&gt;All&lt;/option&gt;
     &lt;option value="1"&gt;Dog&lt;/option&gt;
     &lt;option value="2"&gt;Cat&lt;/option&gt;
     &lt;option value="3"&gt;Tiger&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And when i click <code>All</code> it will remove all other options except all, and if i click any other than <code>All</code> then it need to remove all options</p>
  
  <p>What i tried is like </p>
  
  <pre><code>$(".selectpicker").change(function(event){
      if ($( this ).find("option:first").is(':selected')) {
          $( this ).find("option").prop('selected', false);
          $( this ).find("option:first").prop('selected', true);
      } else {
          $( this ).find("option:first").prop('selected', false);
      }
  }); 
  </code></pre>
  
  <p>But once <code>All</code> clicked then always all is activated and nothing can be clicked, i even tried to get value on <code>onclick</code> event but due to bootstrap selectpicker i can able to get it?</p>
  
  <p>Any tricks to made this possible? i can do this with static variable for one selecpicker but can't able accomplish with multiple selectpicker in a form.</p>