title: Select all / Unselect all in Bootstrap Select plugin
body: <pre><code>&lt;select id=&quot;divRatings&quot; class=&quot;selectpicker&quot; multiple title='Choose one of the following...' data-size=&quot;5&quot; data-selected-text-format=&quot;count&gt;2&quot;&gt;
      &lt;option value=&quot;All&quot; selected=&quot;selected&quot;&gt;All Ratings&lt;/option&gt;
      &lt;option value=&quot;EC&quot;&gt;EC (Early Childhood)&lt;/option&gt;
      &lt;option value=&quot;E&quot;&gt;E (Everyone)&lt;/option&gt;
      &lt;option value=&quot;E10+&quot;&gt;E10+ (Everyone 10+)&lt;/option&gt;
      &lt;option value=&quot;T&quot;&gt;T (Teen)&lt;/option&gt;
      &lt;option value=&quot;M&quot;&gt;M (Mature)&lt;/option&gt;
      &lt;option value=&quot;AO&quot;&gt;AO (Adults Only)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>In html above there are option with value <code>All</code>. I want to select all items if that option is selected and unselect all if i unselect this option.</p>
  <p>I think it will be simple to do, but i can't get why nothing happens on <code>$('#divRatings').change(function(){//some logic});</code></p>
  <p>My function to select/ unselect items:</p>
  <pre><code>function toggleSelectAll(control) {
      if (control.val().indexOf(&quot;All,&quot;) &gt; -1) {
          control.selectpicker('selectAll');
      } else {
          control.selectpicker('deselectAll');
      }
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/bu5vjdk6/" rel="noreferrer">JSFiddle example</a></p>