al hacer click en un button radio que todos los demas button radios con la misma propiedad "name" cambien de color in javascript

Para cambiar el color de los botones de radio al hacer clic en alguno de ellos, podemos seleccionar todos los elementos con la misma propiedad "name" y cambiar su estilo.

Primero, necesitamos agregar un event listener para cada botón de radio. Dentro del listener, seleccionamos todos los elementos con el mismo nombre y cambiamos su estilo. Aquí está el código:

<!-- HTML -->
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="green">
<input type="radio" name="color" value="blue">
155 chars
5 lines

index.tsx
// JS
const radios = document.querySelectorAll('input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('click', () => {
    const radiosWithSameName = document.querySelectorAll(`input[type="radio"][name="${radio.name}"]`);
    radiosWithSameName.forEach(radio => {
      radio.style.backgroundColor = radio.checked ? radio.value : 'transparent';
    });
  });
});
384 chars
12 lines

Este código agrega un event listener a cada botón de radio. Cuando se hace clic en un botón de radio, seleccionamos todos los botones de radio con el mismo nombre y cambiamos su estilo. Si el botón de radio está activado, establecemos su fondo a su valor. De lo contrario, el fondo se establece en transparente.

También puede usar clases CSS para cambiar el estilo de los botones de radio. En este caso, después de seleccionar todos los botones de radio con el mismo nombre, en lugar de cambiar su estilo directamente, podemos agregar o eliminar una clase CSS que defina el estilo deseado.

/* CSS */
input[type="radio"] {
  background-color: transparent;
}

input[type="radio"].selected {
  background-color: lightgray;
}
132 chars
9 lines

index.tsx
// JS
const radios = document.querySelectorAll('input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('click', () => {
    const radiosWithSameName = document.querySelectorAll(`input[type="radio"][name="${radio.name}"]`);
    radiosWithSameName.forEach(radio => {
      radio.classList.remove('selected');
    });
    radio.classList.add('selected');
  });
});
382 chars
13 lines

Este código funciona de la misma manera que el anterior, pero en lugar de establecer el estilo directamente, agregamos o eliminamos la clase "selected". La clase CSS "selected" define el estilo deseado para los botones de radio seleccionados.