Ver Mensaje Individual
  #3 (permalink)  
Antiguo 19/02/2015, 13:38
Avatar de GeekGirl
GeekGirl
 
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 10 años, 4 meses
Puntos: 44
Respuesta: Onclick en radio button

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.