Sorting Listjs多重筛选和排序

我正在尝试这样做，以便我可以通过多个项目进行筛选，包括当前搜索或排序的内容。当前，如果我使用单个项目进行筛选，并且对其进行排序或搜索，则它可以工作，但不使用两个或多个筛选器。我使用复选框，用户可以选择他们想要的筛选依据。当我检查第二个过滤器时，上一个过滤器被移除。我查看了ListJS站点，但它们只提供函数/API，但没有关于如何使用它们的示例。我尝试在stackoverflow的另一个问题上使用其中一个答案，但当我使用过滤器时，它返回一个空白查询。我想能够搜索例如：男冠军，自由发挥，坦克或类似的东西

以下是我正在尝试修复的页面：

下面是javascript:

    var options = {
valueNames: [ 'name', 'rp', 'ip', 'number', 'gender', 'sale', 'free', 'assassin', 'fighter', 'mage', 'marksman', 'support', 'tank' ]
};

var championList = new List('champions', options);

$('#genderx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().gender == 'm'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with gender == m are shown in list
    }
    else{
        championList.filter();
    }
});//End Male Gender

$('#gendery').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().gender == 'f'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with gender == f are shown in list
    }
    else{
        championList.filter();
    }
});//End Female Gender

$('#salex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().sale == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with sale == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Sale

$('#freex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().free == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with free == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Free

$('#assassinx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().assassin == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with assassin == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Assassin

$('#fighterx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().fighter == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with fighter == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Fighter

$('#magex').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().mage == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with mage == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Mage

$('#marksmanx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().marksman == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with marksman == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Marksman

$('#supportx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().support == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with support == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Support

$('#tankx').change(function(){
    if($(this).is(':checked')) {
        championList.filter(function(item) {
            if (item.values().tank == '1'){
                return true;
            }
            else {
                return false;
            }
        }); //Only items with tank == 1 are shown in list
    }
    else{
        championList.filter();
    }
});//End Tank

这是HTML（我把它放在DropBox上，因为它很大）：

---

使用表单和按钮提交带有这些复选框的表单，而不是将更改事件分配给每个复选框。然后按以下步骤进行筛选

$('submitbutton').click(function() {
    championList.filter(function(item){
    // filtering logic here 
    });
}