Creo que estás planeando mal el problema de fondo.
Primero: En un formulario, un grupo de radio buttons comparte el mismo nombre. Como máximo, uno de ellos puede estar activo a la vez (el formulario puede partir sin ninguno seleccionado). Al enviar el formulario, sólo el elemento activo va en la petición al backend.
Si por alguna razón dos elementos estuviesen activos a la vez (e.g., si les pones "checked" por consola), el último activo pisa a los anteriores. El backend sólo recibe un valor por cada elemento con el mismo name
.
Segundo El valor de cada checkbox no es binario. Es un valor arbitrario que le quieres pasar al backend. Acá no hay tal cosa como "ver qué checkbox está activo, y si es el primero dijo rojo, si es el segundo dijo azul, etc etc". El checkbox contiene su valor. Si quieres le pones un label para reforzar la idea.
Tercero Dado que todos comparten el mismo nombre, no necesitas ponerle id. Selecciónalos por nombre y filtra por el que esté activo. A menos que sea con un propósito muy específico, un formulario ya hace todo lo que necesitas.
Resumiendo: puedes hacer lo que necesitas preguntando cuál de todos los radiobutton con el mismo nombre está checked
formulario.querySelector('input[name="color"]:checked');
(Si ninguno está seleccionado lo anterior es null, por lo cual no debieras preguntar su value
sin comprobar que haya uno definido).
document.querySelector('#comprobar').addEventListener('click',e => {
let formulario = e.target.parentNode;
let chequeado = formulario.querySelector('input[name="color"]:checked');
if(!chequeado) {
return console.log(`No hay color seleccionado`);
}
return console.log(`el elemento chequeado tiene valor ${chequeado.value}`);
});
label {
clear:both;
display:block;
margin-bottom:5px;
}
<form>
<p>Seleccione un color:</p>
<label><input type="radio" name="color" value="blanco">Blanco</label>
<label><input type="radio" name="color" value="negro">Negro</label>
<input type="button" value="comprobar" id="comprobar">
</form>