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.
checkbox
, significa que por ejemplo los 3 pueden estarchecked
al mismo tiempo, pero no veo que este caso lo estes considerando. ¿Estas seguro de que no necesitas usarradio
s?