Multiple Select Option and How to Select and Unselect All

Multiple Select Option and How to Select and Unselect All

On a form submission, I have this piece of code:

<select name="searchEventCategory" id="searchEventCategory" data-native-menu="false" multiple="" tabindex="-1" selectedindex="0">
   <option selected="selected" value="ALL">All Categories</option>
   <option value="Art Exhibits">Art Exhibits</option>
   <option value="Camping">Camping</option>
   <option value="Carnival/Festival">Carnival/Festival</option>
   <option value="Community Meetings">Community Meetings</option>
   ...etc...
</select>

It may be easier to see the screenshot attachment of what it looks like.  I like to auto check all the options if they select "All Categories".  But, if they select any other options, such as "Camping", then it will clear the "All Categories".  

Does anyone know how to do this?  Thanks!