javascript: cambiar una clase fuera de un elemento de entrada

Tengo un elemento de entrada con una casilla de verificación:

  <input type="checkbox" id="ID1" name="ID1" checked>

En otro lugar (fuera del campo de entrada), me gustaría tener un texto que cambie su apariencia según el estado de verificación del elemento de entrada con el ID1.

Algo como:

<span for id='ID1' class='Class1'>TEST</span>

¿Cómo obtengo una dependencia entre el texto y el estado del campo de entrada y cómo es posible cambiar Clase1 a Clase2 marcando y desmarcando la casilla de verificación? La clase cambia el color de fondo del Texto. Sé cómo hacer esto dentro del mismo elemento. ¿Pero tener dos elementos diferentes? ¿O es posible acceder a la clase a través del ID del elemento de entrada, debido a la función "for" ¿declaración? Estoy trabajando con javascript.

¡Gracias por cualquier ayuda!

¿Puedes configurar una demostración de CodePen? Estoy un poco confundido sobre cómo estructurar el HTML que estás describiendo.

- Ralph David Abernathy

28 de marzo de 2021 a las 7:45

------------------------------------

Agregue un atributo a la casilla de verificación con el ID del intervalo relacionado.

document.querySelector("#ID1").addEventListener("click", function() {
  let rel = document.getElementById(this.getAttribute("rel"));
  if (rel) {
    if (this.checked) {
      rel.classList.add("Class1");
      rel.classList.remove("Class2");
    } else {
      rel.classList.add("Class2");
      rel.classList.remove("Class1");
    }
  }
});

.Class1 {
  background-color: red;
}

.Class2 {
  background-color: blue;
}

<input type="checkbox" id="ID1" name="ID1" checked rel="span1">
<span id="span1" class='Class1'>TEST</span>

0

------------------------------------

Primero: no puedes/no debes tener dos elementos con el mismo ID

const checkbox = document.getElementById("ID1");
const span = document.getElementById("SpanID1");

checkbox.addEventListener('change', function() {
  if (this.checked) {
    span.innerHtml= 'TEST Checked'
  } else {
    span.innerHtml= 'TEST Unchecked'
  }
});

1

No creo que pretendiera que id fuera el ID del intervalo.

-Barmar

28 de marzo de 2021 a las 7:49

------------------------------------

Si desea una solución CSS, puede apuntar al cuadro de entrada y usar el selector :checked seguido de+ luego el elemento adyacente.

CSS: elemento+elemento [div + p] Selecciona el primer <p> elemento que se coloca inmediatamente después de <div> elementos

.Class1 {
  background-color: yellow
}

#ID1:checked + .Class1 {
  background-color: skyblue
}

<input type="checkbox" id="ID1" name="ID1" checked>
<span for id='ID1' class='Class1'>TEST</span>

Consulta aquí para saber más sobre los diferentes selectores de CSS.