crea un grupo de button radios en html. el ultimo elemento de los buttons radio, al marcarse mostrará un campo html oculto in javascript

Para crear un grupo de button radios en HTML, simplemente usamos la etiqueta <input> con type="radio" y el mismo valor en el atributo name para cada radio button que queremos que esté en un mismo grupo. También podemos agregar una etiqueta <label> para cada radio button para que el usuario pueda seleccionarla haciendo clic en ella.

Para mostrar un campo HTML oculto cuando se seleccione el último radio button, podemos utilizar JavaScript. Primero, debemos agregar un div oculto en nuestro HTML y darle un ID único. Luego, podemos agregar un event listener al último radio button que al ser seleccionado, muestre el div oculto utilizando el método style.display.

Aquí te dejo un ejemplo completo:

<!-- HTML -->
<input type="radio" id="radio1" name="group">
<label for="radio1">Option 1</label>

<input type="radio" id="radio2" name="group">
<label for="radio2">Option 2</label>

<input type="radio" id="radio3" name="group">
<label for="radio3">Show hidden HTML field</label>

<div id="hiddenField" style="display:none;">
  <label for="textInput">Hidden field:</label>
  <input type="text" id="textInput">
</div>

<script>
// JavaScript
const radioButtons = document.querySelectorAll('input[type="radio"]');
const hiddenField = document.getElementById('hiddenField');

// Agregar event listener al último radio button
radioButtons.forEach((radio, i) => {
  if (i === radioButtons.length - 1) {
    radio.addEventListener('change', () => {
      if (radio.checked) {
        hiddenField.style.display = 'block';
      }
      else {
        hiddenField.style.display = 'none';
      }
    });
  }
});
</script>
913 chars
35 lines

En este ejemplo, el tercer radio button es el que muestra el campo HTML oculto. La etiqueta <label> asociada con ese radio button tiene el texto "Show hidden HTML field". Cuando ese radio button es seleccionado, se muestra el campo HTML oculto con el ID "hiddenField". El campo HTML oculto es un div que contiene una etiqueta <label> y un <input> de tipo "text".

La mayoría del trabajo se realiza en JavaScript. En este ejemplo, se seleccionan los elementos necesarios del DOM mediante document.querySelectorAll() y document.getElementById(). Luego se agrega un event listener al tercer radio button utilizando radio.addEventListener(). Cuando ese radio button es seleccionado, se verifica si está seleccionado y se muestra o se oculta el campo HTML oculto con hiddenField.style.display.