Estoy creando un sitio web de WooCommerce/Wordpress para alguien que quiera iniciar un servicio de preparación de comidas. Ella quiere que sea similar a crear su propia secuencia de comandos de pizza, excepto que se usará para personalizar las comidas. Habrá casillas de verificación que muestran los ingredientes, y si las casillas están marcadas, debo enviarlas para que el propietario del sitio web sepa qué comidas preparar.

Ejemplo:

Formulario de correo electrónico

Carnes: Checkbox1 : Bistec

Casilla2: Pollo

Casilla de verificación 3: Carne de cerdo

Este es un ejemplo de lo que tengo hasta ahora:

 <div> <input type="checkbox" name="foodType" data-name="Chicken Thighs"> <label>Chicken Thighs</label> <input type="checkbox" name="foodType" data-name="Chicken Breast"> <label>Chicken Breast</label> <input type="checkbox" name="foodType" data-name="Chicken Leg"><label>Chicken Leg</label> </div> <div id='results'> </div> var finalOrder = []; document.querySelectorAll('input[name=foodType]').forEach(elem => { elem.addEventListener('change', updateList); }); function updateList () { finalOrder = []; // Reset this array so that we can populate it with the new checkbox answers. document.querySelectorAll('input[name=foodType]').forEach(v => { if (v.checked) { finalOrder.push(v.dataset.name); } }); document.querySelector('#results').innerHTML = buildList(); } function buildList () { let list = '<ul>'; finalOrder.forEach(str => { list += "<li>" + str + '</li>'; }); list += '</ul>'; return list; }

Soy muy nuevo en Javascript, así que tuve un poco de ayuda, pero necesito asegurarme de que obtenga los datos de la casilla de verificación. ¿Estoy haciendo esto correctamente? Iba a agregar los datos de la casilla de verificación a una matriz y enviarle la matriz de alguna manera. ¿Cómo recomendarías hacer eso?