Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/02/2009, 14:07
Avatar de jam1138
jam1138
/** @package Moderador */
 
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 20 años, 4 meses
Puntos: 102
jQuery | Etiqueta "label" como indicador de "radio button"

Tengo una pantalla con una simple elección mediante un grupo de radio buttons. Para mejorar la interfáz, intento utilizar el <label> como "botón" y ocultar el radio. Hasta ahí bien, pero no se cuál sea la mejor manera de cambiar el estilo del label (en realidad es un span) para indicar que el "radio" asociado a él está marcado.

Para aclarar, tengo el formulario declarado como sigue:
Código html:
Ver original
  1. <fieldset id="tipoConsulta">
  2.       <legend>Tipo de consulta:</legend>
  3.    
  4.       <label for="tipoUno" class=""><span class="opcion">Uno</span>
  5.         <input type="radio" name="tipoConsulta" id="tipoUno" value="uno" class="oculto" />
  6.       </label>
  7.       <label for="tipoDos" class=""><span class="opcion">Dos</span>
  8.         <input type="radio" name="tipoConsulta" id="tipoDos" value="dos" class="oculto" />
  9.       </label>
  10.       <label for="tipoTres" class=""><span class="opcion">Tres</span>
  11.         <input type="radio" name="tipoConsulta" id="tipoTres" value="tres" class="oculto" />
  12.       </label>
  13.     </fieldset>

Que, visualmente queda algo como:




El "UNO" se ve diferente porque tiene el ratón sobre él. La idea es darle click a una opción y cambiarle la clase para marcarlo visualmente como seleccionado, sin cambiar el comportamiento natural del formulario (en realidad se está marcando un radio).

Entonces, ¿por dónde tomar el asunto?, ¿alguna sugerencia/ejemplo?. Cabe mencionar que es probable desde un inicio el radio esté seleccionado e igual habría que indicarlo.

Gracias de antemano
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"