如何使用jquery-each函数将复选框选中的值推送到js对象

Question

我希望选中的复选框值存储在foodjavascript对象中，如下所示：

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>