Quiero que los valores de la casilla de verificación marcada se almacenen en el objeto javascript de food como se muestra a continuación:
food: {
{id: 1, name: egg }
{id: 2, name: meat}
}
Aquí está mi código:
var exclude_foods = {};
jQuery('input[name=exclude_food]:checked').each(function(){
exclude_foods = Object.assign(exclude_foods, {
id: 1,
name: jQuery(this).val(),
});
});
¿Alguna sugerencia o ayuda?
Puede usar el método map() de jQuery para hacer lo que necesita.
Tenga en cuenta que no está claro de dónde proviene el valor de id , por lo que lo configuré en el índice de la casilla de verificación para este ejemplo. Esto se puede modificar fácilmente para adaptarse a su caso de uso.
$('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>