javascript - Materialize select muliple "CheckUncheck All" event - Stack Overflow

admin管理员组

文章数量:1289345

I have following markup

<select ng-model="sltStatus" id="sltStatusFilter" multiple class="right">
    <option value="0">View All</option>
    <option value="1">Study 1</option>
    <option value="2">Study 2</option>
    <option value="3">Study 3</option>
    <option value="4">Study 4</option>
</select>

And below is the JavaScript code

$('select').material_select();

Materialize use checkboxes for this.

fiddle

How can I have check/uncheck all functionality, I Googled a lot but din't find anything related.

I have following markup

<select ng-model="sltStatus" id="sltStatusFilter" multiple class="right">
    <option value="0">View All</option>
    <option value="1">Study 1</option>
    <option value="2">Study 2</option>
    <option value="3">Study 3</option>
    <option value="4">Study 4</option>
</select>

And below is the JavaScript code

$('select').material_select();

Materialize use checkboxes for this.

fiddle

How can I have check/uncheck all functionality, I Googled a lot but din't find anything related.

• javascript
• jquery
• angularjs
• multi-select

Share Improve this question Follow edited May 24, 2017 at 4:22 Tushar 87.2k2121 gold badges163163 silver badges181181 bronze badges asked May 19, 2017 at 9:14 Md. Parvez AlamMd. Parvez Alam 4,59666 gold badges5757 silver badges118118 bronze badges 7

• so you want to check / uncheck all the options inside the select when option with value 0 is clicked or? Could you explain it a little more? – 404answernotfound Commented May 23, 2017 at 6:32
• Where is your checkbox ? – Jack jdeoel Commented May 23, 2017 at 6:36
• @mnemosdev, you are rigth, but those select options are overlapped by checknboxes – Md. Parvez Alam Commented May 23, 2017 at 6:57
• 1 @DavidJorHpan, materialize overlaps options with checkboxes – Md. Parvez Alam Commented May 23, 2017 at 6:57
• 1 @ThomasMoors as in fiddle the first item in list should check / uncheck the rest items – Md. Parvez Alam Commented May 23, 2017 at 7:08

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 4

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

1. Bind click event: The plugin will add initialized class on the <select> and a unique ID to the corresponding <ul> which starts with select-options-. We can use this knowledge to select the first <li> children i.e. "Check All" option from the dropdown.
2. Check if "Check All" is selected or not: The plugin will add the active class on the selected items. Using hasClass(), we can check if active class is added to the first option in the select.
3. Selecting/Deselecting other options: Using the previous step, we can get the status of "Check All". Using this, we can iterate over other options and trigger click event on appropriate elements.
4. Bonus Updating the options text: To update the option text, get the text using text() method and pare with Check All. Using contents() and textContent the text can be updated easily.

Note: This code pletely depends on the DOM elements created by the third-party plugin. If after an update, the plugin changes the HTML structure this code will not work or need to update 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./ajax/libs/materialize/0.96.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

As I understand from your ments, I think that this is what you want

$('ul.dropdown-content li').first().click(function(){    
  $('ul.dropdown-content li:not(:first-child)').each(function(index) {
           $(this).find("input[type=checkbox]").prop("checked", $('ul.dropdown-content li').first().find("input[type=checkbox]").prop("checked"));                       
        });
});

updated fiddle https://jsfiddle/xv0p06d3/21/

just be carefull with this because I'm using what it seems to be a class from Materialize...so, if the class change, you'll need to change the code. You can find a way to use you own code to get the ul/li elements.

Hope it helps.

UPDATE
the answer above is pure jquery (as your fiddle as just jquery)...one way for you to make this work with angular is create a directive like this.

app.directive('selectMultiple', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).find('select').material_select();
            $(element).find("ul li").first().click(function(){  
            $(element).find("ul li:not(:first-child)").each(function(index) {
                   $(this).find("input[type=checkbox]").prop("checked", $(element).find("ul li").first().find("input[type=checkbox]").prop("checked"));                      
                 });
            });
        }
    };
});

Check Angular fiddle http://jsfiddle/TH87t/1545/

Kind regards.

Materialize is opinionated about how UX elements should behave and interact visually. for that i suggest you to add personal jQuery function to fix you want to do like this:

    // Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    }
});

<input type="checkbox" name="select-all" id="select-all" />

Materialize is hard for customizing ! As you will see in inspect element your select is writing in some different div with class select-wrapper So I do it with that class for check/uncheck function ...

$(".select-wrapper ul li:first").on("click",function(){    
    if($(this).hasClass("active")){
        $(this).parent().find("li").addClass("active selected");
        $(this).parent().find("input[type=checkbox]").prop("checked", true);
    } else {
        $(this).parent().find("li").removeClass("active selected");
        $(this).parent().find("input[type=checkbox]").prop("checked", false);
    }    
});

The problem I found is that if you try to set the values with $('select').val(...) checkboxes are not updated. You need to update them manually calling $('select').material_select() again:

$('select').material_select();
$('select').on('change',function () {
    var selected=$('select').val();
  if (selected.indexOf('0')===0) {
    $('select').val(['0','1','2','3','4']).material_select();
  }
})

This workaround marks all options, but closes the select, and it seems that triggering the open action does not work. The documentation about that in the Materialize web is poor about this, maybe there is no option to control the ponent programatically.

Here is an inplete demo, but you can get the general idea:

https://jsfiddle/xv0p06d3/23/

本文标签： javascriptMaterialize select muliple quotCheckUncheck Allquot eventStack Overflow