如何使用 jquery 每个 function 将复选框选中的值推送到 js object？

Question

我希望选中的复选框值存储在food javascript object 中，如下所示：

food: {
{id: 1, name: egg }
{id: 2, name: meat}
}

这是我的代码：

var exclude_foods = {};

jQuery('input[name=exclude_food]:checked').each(function(){
   exclude_foods = Object.assign(exclude_foods, {
     id: 1,
     name: jQuery(this).val(),
   });
});

有什么建议或帮助吗？

Answer 1

你可以使用 jQuery 的map()方法来做你需要的事情。

请注意，不清楚id值的来源，因此我将其设置为此示例的复选框的索引。 这可以很容易地修改以适合您的用例。

 $('button').on('click', e => { var exclude_foods = { foods: $('input[name="exclude_food"]:checked').map((i, el) => ({ id: i, name: el.value })).get() }; console.log(exclude_foods); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <label> <input type="checkbox" name="exclude_food" value="egg" /> Egg </label> <label> <input type="checkbox" name="exclude_food" value="meat" /> Meat </label> <label> <input type="checkbox" name="exclude_food" value="nuts" /> Nuts </label> <button>Get values</button>