1

Estoy intentando obtener el valor de 3 checkbox y cada uno validarlo por que cada uno va a entrar a una condicion diferente y va hacer algo distinto

<input type="checkbox" value="valor1" id="valor1" class="">valor1
<input type="checkbox" value="valo2" id="valor2" class="">valor2
<input type="checkbox" value="ambos" id="ambos" class="valor">Ambos
formulario.addEventListener("submit", (e) => {
    const valor1 = document.querySelector("#valor1");
    const valor2 = document.querySelector("#valor2");
    const ambos = document.querySelector("#ambos");
    if (valor1.value == "valor1") {
        console.log(estatal)

     //hace algo distinto

    } else if (valor2.value == "valor2") {

        console.log(federal)
    //hace algo distinto

    } else if (ambos.value == "ambos") {
        console.log(ambos)
    }
}

Lo que me arroja es que solo entra ala condición 1 si le quito el == "valor1" y si lo dejo como esta en el código no entra a nada no hace ninguna comparación.

3
  • Los 3 elementos son checkbox, significa que por ejemplo los 3 pueden estar checked al mismo tiempo, pero no veo que este caso lo estes considerando. ¿Estas seguro de que no necesitas usar radios?
    – Marcos
    Commented el 3 abr. 2022 a las 0:34
  • se me ocurrio un checkbox pero si debo de usar radio no hay problema
    – Bryan
    Commented el 3 abr. 2022 a las 5:01
  • Lo que me interesa es que entren ala condicion y en base a lo que selecciono
    – Bryan
    Commented el 3 abr. 2022 a las 5:04

2 respuestas 2

2

Tal como ya te ha indicado @Marcos-MD, los checked son booleanos. Y tal como también te ha indicado @Marcos, quizás deberias usar botones de radio (que se autoexcluyen entre sí).

He recopilado ambos casos en este ejemplo funcional para que tu mismo decidas que necesitas hacer realmente, pues tampoco me queda claro cual de ambas opciones te conviene más:

formulario.addEventListener("submit", (e) => {
  e.preventDefault()
  const valor1 = document.querySelector("#valor1");
  const valor2 = document.querySelector("#valor2");
  const ambos = document.querySelector("#ambos");
  if (valor1.checked == true) {
    console.log(valor1.value)
  }
  if (valor2.checked == true) {
    console.log(valor2.value)
  }
  if (ambos.checked == true) {
    console.log(ambos.value)
  }
})

formularioRadio.addEventListener("submit", (e) => {
  e.preventDefault()
  seleccionado = document.querySelector('input[name="identico"]:checked').value;
  switch(seleccionado) {
    case 'valor1':
        console.log("valor1")
      break;
    case 'valo2':
        console.log("valo2")
      break;
    case 'ambos':
        console.log("ambos")
      break;
    default:
        break;
  }
})
<form id="formulario">
  <input type="checkbox" value="valor1" id="valor1">valor1
  <input type="checkbox" value="valo2" id="valor2">valor2
  <input type="checkbox" value="ambos" id="ambos">Ambos
  <button type="submit">Enviar</button>
</form>

<form id="formularioRadio">
  <input type="radio" name="identico" value="valor1">valor1
  <input type="radio" name="identico" value="valo2">valor2
  <input type="radio" name="identico" value="ambos">Ambos
  <button type="submit">Enviar</button>
</form>

En ambos casos evito el envio directo del formulario mediante un preventDefault() porque en caso contrario intentaria recargar la página independientemente de lo que pongas en javascript.

En el primer caso, con checkboxes, lo que hago es comprobarlos todos, uno a uno, y ejecuto las acciones si se cumple su condición de checked == true.

En el segundo caso, con botones de radio, me leo el valor del botón seleccionado (recuerda que todos los botones tienen que tener el mismo name para que sean autoexcluyentes entre si) y los paso por un switch() para que ejecute tan solo la acción que coincida con el valor leído.

Ahora ya puedes decidir mejor cual de ambas opciones es la que realmente deseas usar para tus fines, que no me han quedado demasiado claros en tu pregunta.

0

Los checkbox son boolean, así que su valor solo puede ser true o false, entonces, no le puedes asignar un valor string.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.