Soy un principiante en JS y quiero hacer lo siguiente:
Tengo 30 casillas de verificación, cada casilla de verificación debe crear una variable dedicada. ¿Cómo puedo hacer esto?
Solo sé hacerlo con 30 declaraciones If. Pero supongo, ¿esta no es la mejor práctica?
Entonces, ¿cómo puedo crear una declaración, qué indica si los checkbxoes están marcados o desmarcados y luego para cada casilla marcada crear una variable?
¡Gracias!
Aquí hay un código que activará un evento cuando se cambie la checkbox de verificación con la casilla de verificación de clase:
<div> <input type="checkbox" class="checkbox" name="option1"> <label for="option1">option1</label> </div> <div> <input type="checkbox" class="checkbox" name="option2"> <label for="option2">option2</label> </div> <script type="text/javascript"> document.querySelectorAll('.checkbox').forEach(item => { item.addEventListener('change', event => { // lets get name that we can find out which one has been changed let name = event.target.getAttribute("name"); if(event.target.checked){ console.log(`${name} was unchecked and now is checked`); }else{ console.log(`${name} was checked and now is unchecked`); } }) }) </script> para que pueda tener tantas casillas de verificación como desee con la checkbox de verificación de clase
Durante nuestra discusión en los comentarios, desea guardar algunos comandos, por lo que estos pueden ayudarlo:
<div> <input type="checkbox" data-command="vlan1=command1" class="checkbox" name="option1"> <label for="option1">option1</label> </div> <div> <input type="checkbox" data-command="vlan4=command2" class="checkbox" name="option2"> <label for="option2">option2</label> </div> <button type="button" id="save">save</button> <script type="text/javascript"> let commands = []; document.getElementById("save").addEventListener("click" , event => { document.querySelectorAll('.checkbox').forEach(item => { if(item.checked){ let name = item.getAttribute("name"); //do some thing here commands['comamnd_' + name] = item.getAttribute("data-command"); } }); }); </script>Cada vez que se hace clic en el botón Enviar, tiene un bucle que arroja todas las entradas y guarda los comandos en una matriz.
Después de eso, puede usar el elemento de la matriz como commands.comamnd_option1 o simplemente lanzar la matriz en bucle.