Al seleccionar un radio, reemplazarlo.

[Gaug]

Buenos días.

Aquí vengo a molestarlos con un problemilla. Tengo éste código que es de una tabla:

Código:

<th width="110" class="Estilo6" scope="col"> SI<input type="radio" name="documentadasi" id="documentadasi" /> NO<input type="radio" name="documentadano" id="documentadano" /> </th>

Bueno en realidad son 2 problemas, cuando selecciono una opción y luego selecciono la otra, ambas se quedan "checked" y debería ser sólo una, me gustaría que me pudieran ayudar con eso.

Y la otra y un poco más complicada creo yo, es que busco que al momento de seleccionar por ejemplo "SI" se quite la opción de ambos radios y reemplace la opción seleccionada, en este caso "SI" por una "X". En pocas palabras que quedara así:

X NO ¿Se entiende?

Ojalá puedan ayudarme con este problema, se los agradezco de antemano.

Saludos

EDIT: Si se pudiera también, en vez de poner esa "X" cargar una imagen, estaría muchísimo mejor, reitero, gracias de antemano

[David]

Para la primera pregunta, sólo tienes que darle el mismo nombre a ambos input radio.

Para lo segundo, envuelve cada campo y su etiqueta con un <label>:

Código HTML:

<label>SI<input type="radio" ... /></label>
 

Así, aparte de tener el sentido semántico apropiado, te será más fácil trabajar con él. Ya que puedes usar replaceChild() para reemplazar el label por el contenido que queras.

[Gaug]

Hola, primero que nada muchas gracias por tu respuesta.

Lo primero quedó resuelto, error de novato.

Ahora en lo segundo tengo esto así y no me funciona

Código HTML:

Primero la función(no sé si es necesario)

<script language="JavaScript">
function reemplazar() {
   var newElement = document.createElement('X');
   newElement.innerHTML = 'Text';
   var oldElement = document.all.documentada;
   document.all.myDiv.replaceChild(newElement, oldElement); 
} 
</script> 

Código HTML:

Y aquí el código de la tabla:

<th width="110" class="Estilo6" scope="col"> <label>SI<input type="radio" name="documentada" id="documentada" onclick="reemplazar()" /></label> <label>NO<input type="radio" name="documentada" id="documentada" /></label> </th> 

Otra cosa, habrá alguna manera que cargue una imagen en vez de un caracter , sino se puede igual así está bien, pero me agradaría bastante. De nuevo agradezco por tu ayuda

[David]

Evita usar document.all; además, el elemento "X" no existe, es conveniente que uses una etiqueta existente, por ejemplo, bien podría ser un img si lo que quieres es una imagen:

Código Javascript:

var nuevo = document.createElement("img");
var actual = document.getElementById("documentada");
nuevo.src = "imagen.jpg";
actual.parentNode.replaceChild(nuevo, actual);
 

[Gaug]

Funcionó!

Muchísimas gracias por tu ayuda, tengo una última dudilla espero que me puedas ayudar, al seleccionar Sí aparece una imagen y al seleccionar No también, pero se aparecen las dos imagenes, ¿habrá alguna manera de que si cambio de opción se desaparezca de la opción anterior, demodo que sólo aparezca una imagen según la opción que está seleccionada? sino es posible, no te preocupes así está perfecto, y una vez más te agradezco por tu magnífica ayuda.