物化多选中的全选选项

Question

Bootstrap multisleect 有全选选项（例如这里）。这可以实现多选吗？

Answer 1

这是一个较小的版本：https : //codepen.io/souvik1809/pen/rvNMyO

HTML

<div class = "row">
  <label>Materialize Multi Select</label>
  <select multiple class="select_all">
    <option value="" disabled selected>Choose your option</option>
    <option value = "1">Mango</option>
    <option value = "24">Orange</option>
    <option value = "3">Apple</option>
    <option value = "4">Cucumber</option>
    <option value = "5">Litchi</option>
  </select>              
</div>  

JavaScript

$(document).ready(function() {
    // $('select').val([1]);
    $('select').formSelect();
    $('select.select_all').siblings('ul').prepend('<li id=sm_select_all><span>Select All</span></li>');
    $('li#sm_select_all').on('click', function () {
      var jq_elem = $(this), 
          jq_elem_span = jq_elem.find('span'),
          select_all = jq_elem_span.text() == 'Select All',
          set_text = select_all ? 'Select None' : 'Select All';
      jq_elem_span.text(set_text);
      jq_elem.siblings('li').filter(function() {
        return $(this).find('input').prop('checked') != select_all;
      }).click();
    });
});