jQuery removeClass似乎不起作用

Question

While firstli.hasClass('selected') does work and retrieves the correct element. The removeClass function doesn't seem to remove to the class. When an element is unchecked I would like the first li to be unchecked as well.

Here is the jfiddle (the code is at the bottom)

Note: I want "Select All" to become unchecked when you uncheck one of the other options.

var firstli = $('.dropdown-menu.inner li').first();
firstli.click(function(event) {   
    if (!firstli.hasClass('selected')) {    
        $('.selectpicker').selectpicker('selectAll');       
    }
    else {
        $('.selectpicker').selectpicker('deselectAll');
    }
    return false;
});

var alllis = $('.dropdown-menu.inner li:not(:first-child)');

alllis.click(function(event) {
    if ($(this).hasClass('selected')) {    
        alert(firstli.hasClass('selected')); //true
        firstli.removeClass('selected');
    }
});

Answer 1

Your problem is with setSelected() rechecking the Select All option. To fix this, I changed that function to the following:

setSelected: function (c, d) {
    if (d) {
        this.$menu.find("li").eq(c).addClass("selected")
    } else {
        this.$menu.find("li").eq(c).removeClass("selected")
        this.$menu.find("li:first-child").removeClass("selected")
    }
}

Basically, if it has to remove the selected class, you know they're not all checked. This works.

http://jsfiddle.net/eC8hF/30/