[SOLUCIONADO] Onclick en radio button

[Begotten]

Hola, estoy utilizando radio button para ver y ocultar div presentes en una pagina, cada radio esta asignado a una funcion javascript que hace visible a un div y oculta el resto, hasta ahi todo bien, el problema se da cuando pongo visible a un div desde una funcion externa ya que el formulario que contiene los radio button viene con uno de estos con el valor "checked" (es el que esta asignado a como se visualiza la pagina por defecto) por lo tanto un div es visualizado pero en el formulario esta marcada una opcion para ver otro div.

Código HTML:

<form>
            <p>
                <label style="margin-left: 4px">Ver Detalles:</label>
                <input type="radio" name="rad" checked="checked" onclick="mostrarDetalle()" />
                <label style="margin-left: 4px">Ver Asistencia:</label>
                <input type="radio" name="rad" onclick="mostrarAsistencia()" />
                <label style="margin-left: 4px">Ver Productos requeridos:</label>
                <input type="radio" name="rad" onclick="mostrarRequerido()" />
                <label style="margin-left: 4px">Ver Empleados en Obra:</label>
                <input type="radio" name="rad" onclick="mostrarEmpleado()" />
            </p>
        </form>
 

Código Javascript:

function mostrarDetalle() {
        document.getElementById("mostrarDetalle").style.display = 'block';
        document.getElementById("mostrarAsistencia").style.display ='none';
        document.getElementById("mostrarRequeridos").style.display ='none';
        document.getElementById("mostrarEmpleados").style.display ='none';
    }  
    function mostrarAsistencia() {
        document.getElementById("mostrarAsistencia").style.display ='block';
        document.getElementById("mostrarDetalle").style.display = 'none';
        document.getElementById("mostrarRequeridos").style.display ='none';
        document.getElementById("mostrarEmpleados").style.display ='none';
    }
    function mostrarRequerido() {
        document.getElementById("mostrarRequeridos").style.display ='block';
        document.getElementById("mostrarAsistencia").style.display ='none';
        document.getElementById("mostrarDetalle").style.display = 'none';
        document.getElementById("mostrarEmpleados").style.display ='none';
    }
    function mostrarEmpleado() {
        document.getElementById("mostrarEmpleados").style.display ='block';
        document.getElementById("mostrarRequeridos").style.display ='none';
        document.getElementById("mostrarAsistencia").style.display ='none';
        document.getElementById("mostrarDetalle").style.display = 'none';
    }
 

Un ejemplo para que se entienda: La pagina por defecto pone al div "mostrarDetalle" como visible y el resto como oculto, si accedo de manera externa a "mostrarRequeridos" este se muestra bien pero en el formulario aun sigue marcada la opcion "mostrarDetalle". ¿alguna idea de como hacer que el radio button correcto se marque?

[GeekGirl]

Podrías hacer algo así (te lo muestro con dos divs nomás pero creo que se entiende la idea):

Código HTML:

<form>
    <p>
        <label for="detalle" style="margin-left: 4px">Ver Detalles:</label>
        <input id="detalle" type="radio" name="rad" checked="checked" onclick="mostrarDetalle()" />
        <label for="asistencia" style="margin-left: 4px">Ver Asistencia:</label>
        <input id="asistencia" type="radio" name="rad" onclick="mostrarAsistencia()" />
    </p>
    <div id="mostrarDetalle">Mostrar detalle</div>
    <div id="mostrarAsistencia">Mostrar asistencia</div>
</form>
<script type="text/javascript">
  function mostrarDetalle() {
      document.getElementById("mostrarDetalle").style.display = 'block';
      document.getElementById("mostrarAsistencia").style.display ='none';
      document.getElementById("asistencia").checked = false;
      document.getElementById("detalle").checked = true;
  }  

  function mostrarAsistencia() {
      document.getElementById("mostrarAsistencia").style.display ='block';
      document.getElementById("mostrarDetalle").style.display = 'none';
      document.getElementById("asistencia").checked = true;
      document.getElementById("detalle").checked = false;
  }

  mostrarAsistencia();
</script> 

Y de paso al agregar el for a tus label, cliqueando sobre el nombre de los radiobutton también se seleccionan (es algo incómodo tener que cliquear solamente en el circulito que es muy chico).

[GeekGirl]

Y otro detalle, hay mucho código similar que podría obviarse. Se podría compactar en muchas menos líneas con algo como esto:

Código HTML:

 <form>
      <p>
          <label for="detalle" style="margin-left: 4px">Ver Detalles:</label>
          <input id="detalle" type="radio" name="rad" checked="checked" onclick="mostrarDiv('mostrarDetalle', this.id)" class="muestraOculta" />
          <label for="asistencia" style="margin-left: 4px">Ver Asistencia:</label>
          <input id="asistencia" type="radio" name="rad" onclick="mostrarDiv('mostrarAsistencia', this.id)" class="muestraOculta" />
          <label for="requeridos" style="margin-left: 4px">Ver Productos requeridos:</label>
          <input id="requeridos" type="radio" name="rad" onclick="mostrarDiv('mostrarRequeridos', this.id)" class="muestraOculta" />
          <label for="empleados" style="margin-left: 4px">Ver Empleados en Obra:</label>
          <input id="empleados" type="radio" name="rad" onclick="mostrarDiv('mostrarEmpleados', this.id)" class="muestraOculta" />
      </p>
      <div id="mostrarDetalle" class="muestraDiv">Mostrar detalle</div>
      <div id="mostrarAsistencia" class="muestraDiv">Mostrar asistencia</div>
      <div id="mostrarRequeridos" class="muestraDiv">Mostrar requeridos</div>
      <div id="mostrarEmpleados" class="muestraDiv">Mostrar empleados</div>
  </form>
  <script type="text/javascript">
    function clearSelection(current) {        
      var allInputs = document.getElementsByTagName("input");
      for (var a = 0; a < allInputs.length; a++) {
        if (allInputs[a].type == 'radio' && allInputs[a].className == 'muestraOculta') {
          allInputs[a].checked = false;
        }
      }

      document.getElementById(current).checked = true;
    }

    function mostrarDiv(divId, radioId) {
        var allDivs = document.getElementsByTagName("div");
        for (var a = 0; a < allDivs.length; a++) {
          if (allDivs[a].className == 'muestraDiv') {
            allDivs[a].style.display = 'none';
          }
        }

        document.getElementById(divId).style.display = 'block';
        clearSelection(radioId);
    }  

    mostrarDiv('mostrarAsistencia', 'asistencia');
  </script> 

Hay muchas otras formas de hacerlo, esta es simplemente una solución rápida que se me ocurrió para este caso. Incluyo una llamada externa a la función principal como ejemplo.

[Begotten]

Muchas gracias, lo implementé de la primera forma y funciona sin problemas hasta el momento. Con mas tiempo intentare implementar el segundo código, en este momento no lo entiendo muy bien, lo analizare con mas detalle.

[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