es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo usar un botón de opción donde cada botón está dedicado a un valor de matriz?

¿Cómo puedo usar un botón de opción donde cada botón está dedicado a un valor de matriz?

20 Jul, 2023 Programación

Lo que estoy intentando hacer es crear un botón de opción, digamos 5 opciones. Debido a que es un botón de opción, evidentemente solo se puede seleccionar una opción. Quiero que este botón de opción inserte cinco valores en un arreglo donde la seleccionada tenga el valor 1, y las demás 0.

Digamos que tengo cinco opciones: A, B, C, D, E

<form method="POST">
  <input type="radio" id="html" name="fav_language" value="1">A<br>
  <input type="radio" id="html" name="fav_language" value="1">B<br>
  <input type="radio" id="html" name="fav_language" value="1">C<br>
  <input type="radio" id="html" name="fav_language" value="1">D<br>
  <input type="radio" id="html" name="fav_language" value="1">E<br>
  <button type="submit" value="Submit">Submit</button>
</form>

Si selecciono la opción B, ¿cómo puedo colocarla en un arreglo para que sea igual a [0,1,0,0,0]?
¿Existe una forma sencilla de hacer esto?
Muchas gracias

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma sencilla de hacer esto utilizando JavaScript. Puede utilizar el método querySelectorAll para seleccionar todos los botones de radio y luego recorrerlos para verificar cuál está seleccionado. Una vez que encuentre el botón de radio seleccionado, puede actualizar los valores del arreglo en consecuencia.

    Aquí hay un ejemplo de código que demuestra esto:

    <form method="POST">
  <input type="radio" id="optionA" name="options" value="A">
  <label for="optionA">A</label><br>
  <input type="radio" id="optionB" name="options" value="B">
  <label for="optionB">B</label><br>
  <input type="radio" id="optionC" name="options" value="C">
  <label for="optionC">C</label><br>
  <input type="radio" id="optionD" name="options" value="D">
  <label for="optionD">D</label><br>
  <input type="radio" id="optionE" name="options" value="E">
  <label for="optionE">E</label><br>
  <button type="button" onclick="submitForm()">Enviar</button>
</form>

<script>
function submitForm() {
  const options = ["A", "B", "C", "D", "E"];
  const selectedValue = document.querySelector('input[name="options"]:checked').value;
  const selectedIndex = options.indexOf(selectedValue);
  const arrayValues = options.map((value, index) => {
    return index === selectedIndex ? 1 : 0;
  });
  console.log(arrayValues);
}
</script>

    En este ejemplo, se utiliza el método querySelector para encontrar el botón de radio seleccionado en función del atributo name del elemento de entrada. Una vez que se encuentra el valor del botón de radio seleccionado, se utiliza el método indexOf para obtener su posición en el arreglo options.

    Finalmente, se utiliza el método map para recorrer el arreglo options y actualizar sus valores en función de si el índice actual coincide con el índice seleccionado. Esto resulta en un arreglo que tiene un valor de 1 en el índice seleccionado y 0 para todos los demás índices.

Comments are closed.