Soy bastante nuevo en javascript. Cualquier ayuda muy apreciada.
He creado un ejemplo simplificado para facilitar la explicación. Quiero cambiar un finalArray según si las casillas de verificación están marcadas o no.
Entonces, por ejemplo, si las casillas de verificación de friends y strangers están marcadas, finalArray_ should = ["friend1" ,"friend2", "stranger1", "stranger2"] .
Si solo se marca la casilla de verificación de enemies , entonces finalArray_ should = ["enemy1" ,"enemy2"] . Y así.
<body> <input type="checkbox" data-id="friends_"> Friends <br /> <!-- other code and functionality --> <input type="checkbox" data-id="enemies_"> Enemies <br /> <!-- other code and functionality --> <input type="checkbox" data-id="strangers_"> Strangers <br /> <script> const friends_ = ["friend1","friend2"]; const enemies_ = ["enemy1","enemy2"]; const strangers_ = ["stranger1","stranger2"]; </script> </body>Intenté esto, pero sé que es una solución horrible que no funciona porque no puedo concatenar una cadena como esta.
<script> const friends_ = ["friend1", "friend2"]; const enemies_ = ["enemy1", "enemy2"]; const strangers_ = ["stranger1", "stranger2"]; const checkboxes = document.querySelectorAll("input[type=checkbox]"); checkboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { checked_boxes = Array.from(checkboxes).filter(i => i.checked).map(i => i.dataset.id).join(); const finalArray = [].concat(checked_boxes); console.log(finalArray); //Array [ "friends_,strangers_" ] }) }) </script>Gracias por tus sugerencias.
Puede crear un dict usando Set y obj de pares key-value de datos de checkbox de verificación.
Cuando se marca una casilla de verificación, puede alternar su id en dict y luego obtener resultados iterando dict
const friends_ = ["friend1", "friend2"]; const enemies_ = ["enemy1", "enemy2"]; const strangers_ = ["stranger1", "stranger2"]; const dict = new Set(); const obj = { friends_, enemies_, strangers_ }; const checkboxes = document.querySelectorAll( "input[type=checkbox]" ); checkboxes.forEach( function ( checkbox ) { checkbox.addEventListener( 'change', function (e) { const id = e.target.dataset.id; if(dict.has(id)) dict.delete(id); else dict.add(id); const result = []; for(let key of dict) result.push(...obj[key]) console.log(result); } ) } ) body { display: flex; } <input type="checkbox" data-id="friends_" id="Friends" /> <label for="Friends">Friends</label> <!-- other code and functionality --> <input type="checkbox" data-id="enemies_" id="Enemies" /> <label for="Enemies">Enemies</label> <!-- other code and functionality --> <input type="checkbox" data-id="strangers_" id="Strangers" /> <label for="Strangers">Strangers</label>Uní las diferentes unidades en un solo objeto para poder usar la identificación de datos como clave para obtener la matriz.
No lo he ejecutado desde que hice esto en mi teléfono, pero puedes probarlo y debería funcionar.
ES:
Lo he cambiado en mi computadora ahora. Debería ejecutarse y mostrarle el resultado al hacer clic en las casillas de verificación.
ED2:
Moví toda la lógica a una función que se llama al cargar la página y cuando se activa una casilla de verificación.
const units = { friends_: ["friend1", "friend2"], enemies_: ["enemy1", "enemy2"], strangers_: ["stranger1", "stranger2"], } let selectedUnits = []; const checkBoxes = document.querySelectorAll("input[type=checkbox]"); checkBoxes.forEach(elm => elm.addEventListener("change", updateUnits)); document.onload = updateUnits(); function updateUnits() { selectedUnits = Array.from(checkBoxes) .filter(elm => elm.checked) .flatMap(elm => units[elm.getAttribute('data-id')]); console.clear(); console.log(selectedUnits); } <body> <input type="checkbox" data-id="friends_" checked> Friends <br /> <!-- other code and functionality --> <input type="checkbox" data-id="enemies_"> Enemies <br /> <!-- other code and functionality --> <input type="checkbox" data-id="strangers_"> Strangers <br /> </body>