在JQuery中计算笛卡尔积可以选中复选框的值吗？

Question

我有一个菜单项

的index.html一个index.html：什么，我需要它

<table> 
 
    <tr> 
 
     <td>Soups</td> 
 
     <td><label><input type="checkbox" class = "soups" name="selected" value="chicken_sp" />chicken_sp</label></td> 
 
     <td><label><input type="checkbox" class = "soups" name="selected" value="clam_ch" />clam_ch</label></td> 
 
     <td><label><input type="checkbox" class = "soups" name="selected" value="mushroom_sp" />mushroom_sp</label></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Salads:</td> 
 
    <td><label><input type="checkbox" class = "salads" name="selected" value="potato_sd" />potato_sd</label></td> 
 
    <td><label><input type="checkbox" class = "salads" name="selected" value="caesars_ds" />caesars_ds</label></td> 
 
    <td><label><input type="checkbox" class = "salads" name="selected" value="carrot_sd" />carrot_sd</label></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Entrees:</td> 
 
     <td><label><input type="checkbox" class = "entrees" name="selected" value="stuffed_mushrooms" />stuffed_mushrooms</label></td> 
 
     <td><label><input type="checkbox" class = "entrees" name="selected" value="chicken_wings" />chicken_wings</label></td> 
 
     <td><label><input type="checkbox" name="selected" class = "entrees" value="fried_calamari" />fried_calamari</label></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Main course:</td> 
 
     <td><label><input type="checkbox" class = "main_course" name="selected" value="fish_mc" />fish_mc</label></td> 
 
     <td><label><input type="checkbox" class = "main_course" name="selected" value="beef_mc" />beef_mc</label></td> 
 
     <td><label><input type="checkbox" name="selected" class = "main_course" value="chicken_mc" />chicken_mc</label></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Desserts:</td> 
 
     <td><label><input type="checkbox" class = "desserts" name="selected" value="chocolate_ds" />chocolate_ds</label></td> 
 
     <td><label><input type="checkbox" class = "desserts" name="selected" value="vanilla_ds" />vanilla_ds</label></td> 
 
     <td><label><input type="checkbox" class = "desserts" name="selected" value="strawberry_ds" />strawberry_ds</label></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fruits:</td> 
 
     <td><label><input type="checkbox" class = "fruits" name="selected" value="apple" />apple</label></td> 
 
     <td><label><input type="checkbox" class = "fruits" name="selected" value="orange" />orange</label></td> 
 
     <td><label><input type="checkbox" name="selected" class = "fruits" value="mango" />mango</label></td> 
 
    </tr> 
 

 
      </table> 
 

 
<p> 
 
<button id='display button'>Calculate combos</button>

例子做 的应用程序需要显示当用户选择菜单项（每个类别中的至少一个）来创建膳食时，膳食组合。 如果用户从每个类别中选择多个项目，则应用程序需要显示所选项目的所有组合。

例如，如果用户选择 “chicken_sp”， “caesar_sd”， “chicken_wings”， “beef_mc”， “chocolate_ds” 和 “苹果”，应用程序应该显示：

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple 

如果用户选择所有以上的，第二个甜点（“strawberry_ds”）和第二水果（“橙色”），应用程序应该显示：

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple 
    chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + orange 
    chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + apple 
    chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + orange  

我试图用笛卡尔乘积来计算这一点。我得到了笛卡尔here

my_js解决方案：

var soups = []; 
var salads = []; 
var entrees = []; 
var main_course = []; 
var desserts = []; 
var fruits = []; 

$("#display_button").click(function(event) { 
event.preventDefault(); 

//putting selected checkbox values into arrays 
var soups = $('input:checkbox:checked.soups').map(function() { 
    return this.value; 
}).get(); 

var salads = $('input:checkbox:checked.salads').map(function() { 
    return this.value; 
}).get(); 

var entrees = $('input:checkbox:checked.entrees').map(function() { 
    return this.value; 
}).get(); 

var main_course = $('input:checkbox:checked.main_course').map(function() { 
    return this.value; 
}).get(); 

var desserts = $('input:checkbox:checked.desserts').map(function() { 
    return this.value; 
}).get(); 

var fruits = $('input:checkbox:checked.fruits').map(function() { 
    return this.value; 
}).get(); 

console.log(salads) 
}); 

//cartesian function 
function cartesianProductOf() { 
return _.reduce(arguments, function(a, b) { 
    return _.flatten(_.map(a, function(x) { 
     return _.map(b, function(y) { 
      return x.concat([y]); 
     }); 
    }), true); 
    }, [ [] ]); 
}; 


//calculating combinations 
altert(cartesianProductOf(soups, salads, entrees, main_course, desserts, fruits)); 

的问题是，cartesianProductOf函数计算产品仅两个参数（两个数组）。我如何改变它来计算6？

Answer 1

您可以使用.not(function)其中.value不与.checked<input>元素的数字结尾过滤.filter()匹配<tr>元素的<input>子节点<input>父<tr>元件，其不是.checked<input>元素的父，.concat().checked<input>.value到结果数组。

$(".offers").on("click", function(event) { 
 
    console.clear(); 
 
    var not = $.map($("input.offers:checked"), function(el) { 
 
    return el.value 
 
    }) 
 
    .map(function(element) { 
 
    return $("table tr") 
 
     .not(function(i, el) { 
 
     return $(el).find("input[value='" + element + "']").is("*") 
 
     }) 
 
     .find("input") 
 
     .filter(function(index, el) { 
 
     return el.value.slice(-1) !== element.slice(-1) 
 
     }) 
 
     .map(function(index, el) { 
 
     return el.value 
 
     }) 
 
     .get() 
 
     .concat(element); 
 
    }); 
 
    
 
    console.log(not); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="offers">click</button> 
 

 
<table> 
 
    <tr> 
 
    <td><label><input type="checkbox" name="selected" value="offer1" class="offers" />offer1</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="offer2" class="offers" />offer2</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="offer3" class=".offers" />offer3</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="offer4" class="offers" />offer4</label></td> 
 
    </tr> 
 
    <tr> 
 
    <td><label><input type="checkbox" name="selected" value="prop1" class="offers" />prop1</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="prop2" class="offers" />prop2</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="prop3" class="offers" />prop3</label></td> 
 
    <td><label><input type="checkbox" name="selected" value="prop4" class="offers" />prop4</label></td> 
 
    </tr> 
 
</table>