mostrar y ocultar un campo html en dependencia de si un button radio esta marcado o no in javascript

Para mostrar u ocultar un campo HTML en función de si se ha marcado un botón de radio o no, se puede utilizar el siguiente código utilizando jQuery:

<!-- HTML -->
<label>
  <input type="radio" name="opciones" value="opcion1" class="opcion"> Opción 1
</label>
<label>
  <input type="radio" name="opciones" value="opcion2" class="opcion"> Opción 2
</label>
<div id="campoOculto" style="display:none;">
  <label for="campo">Campo Oculto: </label>
  <input type="text" id="campo" name="campo">
</div>
348 chars
12 lines

index.tsx
// JavaScript y jQuery
$(document).ready(function(){
  $('.opcion').change(function(){
    if($(this).hasClass('opcion1')){
      $('#campoOculto').hide();
    } else if($(this).hasClass('opcion2')){
      $('#campoOculto').show();
    }
  });
});
248 chars
11 lines

El código anterior oculta un campo <div> que contiene un <input> de tipo text cuando se marca la primera opción de un grupo de botones de radio, y lo muestra cuando se marca la segunda opción. Para esto, se utiliza el evento change de jQuery para detectar cuándo se ha cambiado la selección de un botón de radio. Luego, se verifica con la función hasClass() si el botón de radio seleccionado corresponde a la primera o segunda opción y se oculta o muestra el campo oculto en consecuencia utilizando las funciones hide() y show() de jQuery, respectivamente.