mostrar y ocultar un elemento html cuando se marca un radio button in javascript

Para mostrar u ocultar un elemento HTML en función de si se selecciona o no un radio button, primero necesitamos asignar un identificador único a nuestro radio button y al elemento que queremos mostrar/ocultar. Por ejemplo, aquí hay un radio button con id "mostrarOcultarRadio":

<input type="radio" id="mostrarOcultarRadio" name="mostrarOcultar" onclick="mostrarOcultarElemento()"> Mostrar/Ocultar
119 chars
2 lines

Y aquí hay un elemento que queremos mostrar u ocultar, con id "elementoParaMostrarOcultar":

<div id="elementoParaMostrarOcultar">Este es el elemento que queremos mostrar u ocultar</div>
94 chars
2 lines

Para manejar el evento onclick del radio button, podemos llamar a una función JavaScript llamada "mostrarOcultarElemento", que utiliza el método "getElementById" para obtener una referencia al elemento que queremos mostrar/ocultar, y luego cambia su propiedad de visibilidad a "visible" o "hidden", dependiendo de si el radio button está seleccionado o no:

index.tsx
function mostrarOcultarElemento() {
  var elemento = document.getElementById("elementoParaMostrarOcultar");
  if (document.getElementById("mostrarOcultarRadio").checked) {
    elemento.style.visibility = "visible";
  } else {
    elemento.style.visibility = "hidden";
  }
}
274 chars
9 lines

Y en nuestro archivo CSS, podemos ocultar inicialmente el elemento estableciendo su propiedad de visibilidad en "hidden":

#elementoParaMostrarOcultar {
  visibility: hidden;
}
54 chars
4 lines