Onclick en radio button

[Alexis88]

Otra forma de hacerlo sería mediante una clase en la hoja de estilos que haga visible al elemento que corresponda con la opción marcada. Luego, cuando selecciones otra opción, solamente tienes que tomar al elemento que posea dicha clase y se la quitas para luego asignársela al elemento que corresponda con la nueva opción marcada.

Un ejemplo:

Código HTML:

Mostrar el primero <input type = "radio" name = "opcion" value = "opc1" checked />
Mostrar el segundo <input type = "radio" name = "opcion" value = "opc2" />
Mostrar el tercero <input type = "radio" name = "opcion" value = "opc3" />
 
<div id = "opc1" class = "visible">Primer Div</div>
<div id = "opc2">Segundo Div</div>
<div id = "opc3">Tercer Div</div>
 

Código CSS:

div{
    width: 250px;
    height: 50px;
    opacity: 0;
}
 
.visible{
    opacity: 1;
}
 

Código Javascript:

[].forEach.call(document.querySelectorAll("[name=opcion]"), function(radio){
    radio.addEventListener("click", function(){
        document.querySelector(".visible").className = "";
        document.querySelector("#" + this.value).className = "visible";
    }, false);
});
 

Como verás, las opciones tienen por valor el id del <div> que le corresponde, además, por defecto marco a la primera opción y asigno la clase CSS 'visible' al primer <div>. En la hoja de estilos, asigno las respectivas dimensiones a los <div> y los hago opacos para que no se vean, pero como la clase 'visible' quita esa opacidad, al haberla asignado inicialmente al primer <div>, este estará visible desde el principio y así será con los demás <div> cuando se marquen las respectivas opciones.

En el código JavaScript, itero sobre el conjunto de elementos con el nombre 'opcion', es decir, las opciones. A cada una, le delego una función por cada vez que se le de un clic. En dicha función, tomo al <div> del documento que posea la clase 'visible', se la quito y se la asigno al <div> cuyo id corresponda con el valor de la opción marcada.

DEMO

Saludos