jQuery | Etiqueta "label" como indicador de "radio button"

[jam1138]

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:

<fieldset id="tipoConsulta">
      <legend>Tipo de consulta:</legend>
    
      <label for="tipoUno" class=""><span class="opcion">Uno</span> 
        <input type="radio" name="tipoConsulta" id="tipoUno" value="uno" class="oculto" />
      </label>
      <label for="tipoDos" class=""><span class="opcion">Dos</span> 
        <input type="radio" name="tipoConsulta" id="tipoDos" value="dos" class="oculto" />
      </label>
      <label for="tipoTres" class=""><span class="opcion">Tres</span> 
        <input type="radio" name="tipoConsulta" id="tipoTres" value="tres" class="oculto" />
      </label>
    </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

[jam1138]

... ok, después de pensarlo un rato, veo que me estaba complicando con que sean radio buttons ... pudiendo manejar el evento como un click a las etiquetas.

Es entonces, que tengo esto como "solución":

Código javascript:

$(document).ready(function() {
    var tipoConsulta = $('#tipoConsulta > label > span');
        
    tipoConsulta.click(function() {
        tipoConsulta.each(function() {
            $(this).attr('class', 'opcion');
        });
 
        $(this).attr('class', 'seleccion');
    });
});
 

¿comentarios, correcciones, críticas, alternativas?; me supóngo hay otro método para cambiar la clase, ¿no?

[foreverOdd]

Hola, espero que esto te sirva.

$(document).ready(function() {

var tipoConsulta = $('#tipoConsulta > label > span');



tipoConsulta.click(function() {

tipoConsulta.each(function() {

$(this).addClass("rojo");

});
$(this).removeClass("rojo").addClass("azul");
}
)})
</script>
<style>

.azul{ color:blue}
.rojo{ color:red}

</style>

Saludos

[foreverOdd]

Optimizando:

Código javascript:

<script type="text/javascript">
 
$(document).ready(function() {
    var tipoConsulta = $('#tipoConsulta > label > span');
    tipoConsulta.click(function() {
        tipoConsulta.addClass("rojo");
    $(this).removeClass("rojo").addClass("azul");
}
)})
</script>
 

[jam1138]

Gracias por el código. En mi caso, no me sirve addClass(), pues lo que hace es "adjuntar" la clase sin remover las propiedades que la clase anterior había colocado. Sin embargo, gracias a tu aporte puedo reducir código

Código javascript:

$(document).ready(function() {
    var tipoConsulta = $('#tipoConsulta > label > span');
        
    tipoConsulta.click(function() {
        tipoConsulta.attr('class', 'opcion');
        $(this).removeClass('opcion').addClass('seleccion');
    });
});
 

[jam1138]

Bueno, en un rato de curiosidad logré hacerlo desde el radio button, básicamente el evento onChange al grupo y para tomar el seleccionado con el selector :checked

Código javascript:

$(document).ready(function() {
    $('input[name=tipoConsulta]').change(function() {
        var seleccion = $('input[name=tipoConsulta]:checked'); 
        
        $('#tipoConsulta > label > span').attr('class', 'opcion');
        seleccion.prev().removeClass('opcion').addClass('seleccion);
    });
});
 

De esta manera me agradó más pues puedo hacer varias cosas (como tomar el value y el texto de la etiqueta) partiendo desde la opción seleccionada, lo que reduce el margen de error.

Ojalá a alguien le sirva ...

[jam1138]

Nota: He visto esto no sirve en IExplorer (clásico), pues el evento "onChange" es lanzado cuando se da click en otra parte fuera de las etiquetas. Además, parece no asigna los valores a los radios cuando estos están ocultos ...

Ahí como información.