Tengo dos casillas de verificación, y quiero que cada vez que haga clic en cualquier casilla de verificación, sus valores (matriz estática) se deben insertar en la matriz "final" (matriz vacía). Si desmarco esa casilla de verificación, su valor (matriz estática) debe eliminarse de la "matriz final".
En este momento estoy insertando/presionando una matriz "estática" en una matriz en blanco (matriz final), pero quiero saber cómo puedo eliminar esta matriz "estática" después de desmarcar la casilla de verificación.
var myarray = []; var model = ["Height", "size", "bust"]; var Hostess = ["Height", "bust"]; $("input:checkbox.country").click(function() { var value = $(this).val(); if (!$(this).is(":checked")) alert('you are unchecked ' + $(this).val()); else myarray.push(model); }); console.log('Final array is ', myarray); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form> <fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="model" class="country" name="interest" value="model"> <label for="model">model</label> </div> <div> <input type="checkbox" id="Hostess" class="country" name="interest" value="Hostess"> <label for="hostess">Hostess</label> </div> <div> <button type="submit">Submit form</button> </div> </fieldset> </form>Debe generar la matriz a partir de las casillas marcadas cada vez
Sugiero un objeto, donde puede obtener los valores en función de la clave.
Cambié el nombre de la clase (país): no coincide con los valores reales (atributos basados en intereses)
let myArray; let interests = { "model": ["Height", "size", "bust"], "hostess": ["Height", "bust"] } $("input:checkbox.interest").on("click", function() { myArray = $("input:checkbox.interest:checked") .map(function() { console.log(this.value,interests[this.value]) return interests[this.value] }) // get checked boxes and their interests .get() // return an array .filter(val => val); // remove empty slots console.log('Final array is ', myArray); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form> <fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="model" class="interest" name="interest" value="model"> <label for="model">model</label> </div> <div> <input type="checkbox" id="Hostess" class="interest" name="interest" value="hostess"> <label for="hostess">Hostess</label> </div> <div> <button type="submit">Submit form</button> </div> </fieldset> </form>Como se indica en los comentarios, puede reconstruir la matriz cada vez.
Suponiendo que desea una matriz unidimensional en lugar de una matriz de matrices, puede usar
myarray.push(...modelarray);para agregar los elementos de la matriz.
He usado un switch aquí para hacer coincidir el valor de la casilla de verificación con la variable de matriz, pero una mejor solución para esta parte (ya proporcionada en otra respuesta) es usar un objeto y obtener la matriz por clave. Mantuve esto con el switch para mostrar la diferencia y el uso de .push(...array)
var myarray = []; var modelarray = ["A", "B", "C"]; var hostessarray = ["X", "Y"]; $("input:checkbox.country").click(function() { // rebuild myarray myarray = []; $("input:checkbox.country:checked").each(function() { switch ($(this).val()) { case "model": myarray.push(...modelarray); break; case "hostess": myarray.push(...hostessarray); break; } }); console.log('Updated array is ', myarray); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form> <fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="model" class="country" name="interest" value="model"> <label for="model">model</label> </div> <div> <input type="checkbox" id="hostess" class="country" name="interest" value="hostess"> <label for="hostess">hostess</label> </div> <div> <button type="submit">Submit form</button> </div> </fieldset> </form>También en violín: https://jsfiddle.net/cwbvqmp4/
Use condiciones como las siguientes mientras tenga una matriz estática para ambas casillas de verificación.
var myarray = []; var model = ["Height", "size", "bust"]; var Hostess = ["Height", "bust"]; $("input:checkbox.country").click(function() { var value = $(this).val(); if(value === "model"){ if (!$(this).is(":checked")){ myarray.splice(myarray.indexOf(model), 1); } else{ myarray.push(model); } } else if(value === "Hostess"){ if (!$(this).is(":checked")){ myarray.splice(myarray.indexOf(Hostess), 1); } else{ myarray.push(Hostess); } } console.log('Final array is ', myarray); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <form> <fieldset> <legend>Choose your interests</legend> <div> <input type="checkbox" id="model" class="country" name="interest" value="model"> <label for="model">model</label> </div> <div> <input type="checkbox" id="Hostess" class="country" name="interest" value="Hostess"> <label for="hostess">Hostess</label> </div> <div> <button type="submit">Submit form</button> </div> </fieldset> </form>