Materialize the selection "Check / Uncheck All"

MaterializeCSS does not support this feature internally. However, this can be accomplished using jQuery DOM manipulation methods.

• Bind click
  
  Event: The plugin will add a class initialized
  
  to <select>
  
  and a unique identifier to the corresponding <ul>
  
  one that starts with select-options-
  
  . We can use this knowledge to choose the first <li>
  
  child, i.e. "Check All" from the dropdown list.
• Check if "Check All" is active
  
  selected or not: the plugin will add a class to the selected elements. Using hasClass()
  
  , we can check if the class is added active
  
  to the first parameter in the select element.
• Select / Deselect other parameters: Using the previous step, we can get the status "Check all". Using this, we can iterate over other parameters and fire an event click
  
  on the corresponding elements.
• Bonus . Updating the parameter text. To update the option text, get the text using the method text()
  
  and compare it with Check All
  
  . Using contents()
  
  and textContent
  
  , the text can be easily updated.

Note. ... This code is totally dependent on DOM elements created by a third party plugin. If the plugin changes the HTML structure after the update, this code will not work or must be updated accordingly.

Demo

$('select').material_select();

$('select[select-all].initialized').prev('ul[id^="select-options-"]').children('li:first').on('click', function() {
  var selector = 'li.active';
  if ($(this).hasClass('active')) {
    selector = 'li:not(".active")';
  }

  $(this).siblings(selector).each(function() {
    $(this).click();
  });

  $('span', this).contents().last()[0].textContent = $(this).text().trim() === 'Check All' ? 'Uncheck All' : 'Check All';
  // Check values of selected options
  console.log($(this).parent().next().val());
});
      

        
        
        
      

    

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


With "select-all" option
<div class="input-field col s5">
  <select multiple select-all searchable="search here..">
    <option value="0">Check All</option>
    <option value="1">Yellow</option>
    <option value="2">Green</option>
    <option value="3">Pink</option>
    <option value="4">Orange</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>


<br />
Without "Select All" option
<div class="input-field col s5">
  <select multiple searchable="Animals">
    <option value="0">Cat</option>
    <option value="1">Dog</option>
    <option value="2">Horse</option>
    <option value="3">Pig</option>
    <option value="4">Lion</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>