select all toggling using jquery

Question

I am using a bootstrap style multiselect dropdown menu but I can't get the select all toggle to work properly. When I select everything I would like the "select all" option to be selected as well as everything else.

Here is what I tried and here is a jfiddle . My custom code is in the bottom.

var firstli = $('.dropdown-menu.inner li').first();

firstli.click(function(event) {   
   if (!firstli.hasClass('selected'))
   {    

        $('.selectpicker').selectpicker('selectAll');       
   }

    else {
         $('.selectpicker').selectpicker('deselectAll');
    }
});

Answer 1

You have to add a return false; to your function or the click which starts the function will deselect the "Select all" after the selectAll :

var firstli = $('.dropdown-menu.inner li').first();

firstli.click(function (event) {
    if (!firstli.hasClass('selected')) {
        $('.selectpicker').selectpicker('selectAll');
    } else {
        $('.selectpicker').selectpicker('deselectAll');
    }
    return false;
});