Quiero crear una matriz de elementos seleccionados/marcados y usarlo más.
A continuación se muestra mi código HTML básico y JS (JS externo).
Nota: también probé esta solución, pero no funciona como yo quería. ( ¿Cómo puedo eliminar un elemento específico de una matriz? )
Mi código JS y HTML:
function theFunction(event) { event.preventDefault(); console.log("test"); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>Simplemente empuje el elemento a la matriz, si el elemento no existe en la matriz.
Si el elemento ya existe, elimínelo de la matriz usando Array.splice
He movido el clic incluso del li a la entrada.
También he usado pantalla flex para los elementos, de modo que la etiqueta pueda usar el espacio restante en el li
const created = []; function theFunction(event) { const index = created.indexOf(event.target.value); index === -1 ? created.push(event.target.value) : created.splice(index, 1); console.log(created); } li { display: flex; } label { flex: 1; } <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" type="checkbox" value="first" id="first" onclick="theFunction(event)"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" type="checkbox" value="second" id="second" onclick="theFunction(event)"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1" type="checkbox" value="third" id="third" onclick="theFunction(event)"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth" onclick="theFunction(event)"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth" onclick="theFunction(event)"> <label for="fifth">Fifth checkbox</label> </li> </ul>Podrías hacerlo así:
function theFunction(obj) { var c = $(obj).is(":checked"); var va = $(obj).next("label").text(); if (c) { arr.push(va) } else { arr = jQuery.grep(arr, function(value) { return value != va; }); } console.log(arr); } Nota: Moví onclick a su entrada y cambié onclick="theFunction(event)" a onclick="theFunction(this)"
Manifestación
var arr = []; function theFunction(obj) { var c = $(obj).is(":checked"); var va = $(obj).next("label").text(); if (c) { arr.push(va) } else { arr = jQuery.grep(arr, function(value) { return value != va; }); } console.log(arr); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dropdown-menu" id="userlist"> <li class="list-group-item border-0 py-2" id="first-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="first" id="first"> <label for="first">First checkbox</label> </li> <li class="list-group-item border-0 py-2" id="second-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="second" id="second"> <label for="second">Second checkbox</label> </li> <li class="list-group-item border-0 py-2" id="third-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="third" id="third"> <label for="third">Third checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fourth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fourth" id="fourth"> <label for="fourth">Fourth checkbox</label> </li> <li class="list-group-item border-0 py-2" id="fifth-wrapper"> <input class="form-check-input me-1" onclick="theFunction(this)" type="checkbox" value="fifth" id="fifth"> <label for="fifth">Fifth checkbox</label> </li> </ul>