带有复选框值的 Jquery 过滤器数组并输出新数组

Question

我有一个数组：

var arrayList = [{"color":"red","size":small"},{"color":"brown","size":medium"},{"color":"red","size":large"}];

带有复选框：

<input name="red" type="checkbox" value="red" />
<input name="brown" type="checkbox" value="brown" />
<input name="small" type="checkbox" value="small" />
<input name="large" type="checkbox" value="large" />

我需要能够使用复选框值过滤数组以输出一个新数组。

如果我选中“红色”，新数组应该是：

var arrayList = [{"color":"red","size":small"},{"color":"red","size":large"}];

如果我检查了“红色”和“大”，我会得到：

var arrayList = [{"color":"red","size":large"}];

感谢您对此的任何帮助。

我需要澄清我的问题，这是我的过滤器代码：

//this is the top level array generated with all products
    var product = [{"price":"200","color":"red","size":small"},{"price":"250","color":"brown","size":medium"},{"price":"300","color":"red","size":large"}];

// displayed products array
    var filterdProducts = [];  
            var key = 0;

        //start of price range filter
            if(!minPrice && !maxPrice){
                filterdProducts = products;
            } else{
                $.each(products, function(i, object) {   
                    var curentPrice = parseFloat(object.price); 
                    var priceMinOk = true;
                    var priceMaxOk = true;
                    // filter results match the price range
                    if(maxPrice || minPrice){
                        if(maxPrice && maxPrice<curentPrice){
                            priceMaxOk = false;
                        }
                        if(minPrice && minPrice>curentPrice){
                            priceMinOk = false;
                        }
                    }  
                    //  loop over list and get only related to new array
                     if( priceMinOk && priceMaxOk ){  
                        filterdProducts[key] = object;                  
                        key++;

                     }  

                });
            } 

我需要将复选框功能添加到该过滤器，以便我还可以按大小和颜色进行过滤。希望这会有所帮助

Answer 1

试试这个

var arrayList = [{"color":"red","size":"small"},{"color":"brown","size":"medium"},{"color":"red","size":"large"}];
var newArrayList = [];


   if($("input[value=red]").checked){
       if($("input[value=large]").checked){
         newArrayList.push({"color":"red","size":"large"});
       }
       else{
          newArrayList.push({"color":"red","size":"small"}).push({"color":"red","size":"large"});
       }

   }