Estoy tratando de obtener un texto cuando se selecciona la casilla de verificación, quería saber qué casilla de verificación seleccionó para poder identificar "Sesame Free". Este código no funciona actualmente como se esperaba.
function GetListOfMyCartProducts() { var rows = document.querySelectorAll('input[type=checkbox]:checked').childNodes[0].outerText return rows; } <label class="flex items-start"> <input type="checkbox" class="fixed opacity-0 invisible"> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"></span> <span class="flex-1 uppercase">Sesame Free</span> </label>Deberá obtener una lista de todas las casillas de verificación que están seleccionadas y luego iterar sobre ellas, agregar el texto a una matriz y devolverlo. Aquí uso parentElement y luego lastElementChild para obtener el texto. Esto solo funcionará si el orden de los elementos sigue siendo el mismo (el texto que desea es siempre el último elemento).
function GetListOfMyCartProducts() { const rows = [] const checkboxes = document.querySelectorAll('input[type=checkbox]:checked') for (selected of checkboxes) { const span = selected.parentElement.lastElementChild rows.push(span.innerText) } return rows } document.addEventListener('DOMContentLoaded', () => { const button = document.getElementsByTagName('button')[0] button.addEventListener('click', () => { console.log(GetListOfMyCartProducts()) }) }) <label class="flex items-start"> <input type="checkbox" class="fixed opacity-0 invisible"> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"></span> <span class="flex-1 uppercase">Sesame Free</span> </label> <button>Submit</button> Sin embargo, se puede hacer algo más simple y es agregar el texto a la casilla de verificación también. Puede usar un atributo de data para almacenarlo para una recuperación más fácil
function GetListOfMyCartProducts() { const rows = [] const checkboxes = document.querySelectorAll('input[type=checkbox]:checked') for (selected of checkboxes) { rows.push(selected.getAttribute('data-text')) } return rows } document.addEventListener('DOMContentLoaded', () => { const button = document.getElementsByTagName('button')[0] button.addEventListener('click', () => { console.log(GetListOfMyCartProducts()) }) }) <label class="flex items-start"> <input data-text="Sesame Free" type="checkbox" class="fixed opacity-0 invisible"> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"></span> <span class="flex-1 uppercase">Sesame Free</span> </label> <button>Submit</button> También puede asignarle un nombre de clase al span con el texto para que sepa a cuál apuntar en su bucle. Hay muchas maneras de hacerlo, pero el primer método probablemente no sea el mejor, ya que se basa en el orden de los elementos, que puede cambiar y luego romper su aplicación.
querySelectorAll devolverá una NodeList que es una colección de nodos. Está intentando acceder a la propiedad childNodes en NodeList que no existe.
Debe procesar la colección de nodos de querySelectorAll usando un bucle forEach() y luego tomar el padre usando parentElement (la etiqueta) y luego buscar dentro de la label principal el span relevante que desea.
Manifestación:
function getListOfMyCartProducts() { const products = []; document.querySelectorAll('input[type=checkbox]:checked').forEach((node) => { products.push(node.parentElement.querySelector('.flex-1.uppercase').innerText); }); console.info(products); return products; } function getListOfMyCartProductsBetter() { const products = []; document.querySelectorAll('input[type=checkbox]:checked').forEach((node) => { products.push(node.value); }); console.info(products); return products; } <label class="flex items-start"> <input type="checkbox" class="fixed opacity-0 invisible" checked value="Sesame Free"/> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"/> <span class="flex-1 uppercase">Sesame Free</span> </label> <label class="flex items-start"> <input type="checkbox" class="fixed opacity-0 invisible" checked value="Dairy Free" /> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"/> <span class="flex-1 uppercase">Dairy Free</span> </label> <hr/> <button onclick="getListOfMyCartProducts()">get</button> <button onclick="getListOfMyCartProductsBetter()">get (better)</button> PD, es mejor agregar el valor que desea a la checkbox de verificación y simplemente acceder a ella. Ver getListOfMyCartProductsBetter()
<label class="flex items-start"> <input onclick="validate(this)" type="checkbox" class="fixed opacity-0 invisible" value="Sesame Free"> <span class="icon-check-b bg-green-600a20 w-17 h-17 rounded-4 mr-16 block text-f14 leading-none"></span> <span class="flex-1 uppercase">Sesame Free</span> </label> function validate(item) { console.log(item) var remember = item if (remember.checked) { console.log(remember.value) } else { alert("You didn't check it! Let me check it for you."); } }