jQuery Multiselect - Select All Event Handler

Question

I have a jQuery multiselect that has select all option checked by default. Whenever there's a change in the selected options I'm reloading the page data accordingly.

Everything works great except that the 'Select All' button click doesn't trigger onChange event and I'm not able to reload the data when that is clicked. I tried attaching event handlers to checkAll and selectAll as well but to no avail.

$("#testselect").multiselect({
        nonSelectedText: 'None',
        allSelectedText: 'All Selected',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        checkAll: function () {
            alert("check all"); // Doesn't work
        },
        selectAll: function () {
            alert("select all"); // Doesn't work
        },
        onChange: function (option, checked, select) {
            alert("onchange") // Works but not for 'All Selected'
            // Do something
        }
});
$("#testselect").multiselect('selectAll', false);
$("#testselect").multiselect('updateButtonText');

Answer 1

Add Main Check Box:

<th>SELECT ALL<br/><input type="checkbox"  onClick="toggle(this)" /></th>

Add Script:

          <script>

          function toggle(source) {
           checkboxes = document.getElementsByName('checkbox[]');
           if(x=1)
           {
             for(var i=0, n=checkboxes.length;i<n;i++) {
               checkboxes[i].checked = source.checked;
             }}}



           </script>

Add Checkboxes You like to select by main:

<input name="checkbox[]"    type="checkbox" >

Answer 2

This works for me.

$(document).on('click', '.ms-selectall', function( event ){
        //your code
});

Answer 3

Instead of checkAll and selectAll , use onSelectAll and onDeselectAll event

Example :

$("#testselect").multiselect({
        nonSelectedText: 'None',
        allSelectedText: 'All Selected',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        onChange: function (option, checked, select) {
            alert("onchange") // Works but not for 'All Selected'
        },
        onSelectAll: function () {
            console.log("call when select all");
        },
        onDeselectAll: function () {
            console.log("call when deselect all");
        }
});