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"}); 
     } 

    }