cuando un button radio sea deseleccionado cambiar su color in javascript

Podemos lograr eso accediendo a los eventos del botón de radio con JavaScript y cambiar los estilos CSS correspondientes. Primero, necesitamos agregar un evento de escucha de cambios al botón de radio y luego llamar a una función que cambie los estilos.

HTML:


<input type="radio" name="myRadio" value="1" id="myRadio1">
<label for="myRadio1">Opción 1</label>

<input type="radio" name="myRadio" value="2" id="myRadio2">
<label for="myRadio2">Opcion 2</label>
199 chars
6 lines

CSS:


input[type="radio"]:checked + label {
    background-color: green;
    color: #fff;
}
input[type="radio"]:not(:checked) + label {
    background-color: red;
    color: #fff;
}
176 chars
9 lines

JavaScript:


index.tsx
const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
   radio.addEventListener('change', function() {
      radios.forEach(rd => {
          rd.nextElementSibling.classList.remove('selected');
      });
      if(this.checked) {
         this.nextElementSibling.classList.add('selected');
      } else {
         this.nextElementSibling.classList.remove('selected');
      }
   });
});
423 chars
14 lines

En este ejemplo, cuando un botón de radio es seleccionado el color de fondo de su etiqueta correspondiente cambia a verde, y cuando es deseleccionado cambia a rojo. Para lograr esto se utiliza la técnica de selectores de hermanos adyacentes de CSS combinado con la manipulación del DOM con JavaScript.

similar javascript code snippets

create a popup dialogue in javascript

how to change the border of an element in javascript

create an date picker in javascript

render a react calculator in javascript

center a div in javascript

create a carousel in html in javascript

do a barrel roll in javascript

convert div to image in javascript

blue coloured cta in javascript

render a typeface in javascript

related categories

javascript

html

css