Seleccionar radio cambiar color de texto, tiempo real

tazzwt · #1 (**permalink**) 07/09/2011, 19:45

La idea es al seleccionar un item del radio, este cambie de color, como el siguiente ejemplo:

eso porfavor, no se me ocurre que mas hacer.

Tengo este codigo:

Código Javascript:

Ver original<script> 
function VerColor(){ 
       if (document.color.radio1.checked) 
         var colortexto = "";
     } 
 
       if (document.color.radio2.checked) 
         var colortexto = "red";
     } 
 
       if (document.color.radio3.checked) 
         var colortexto = "blue";
     } 
 
</script> 
 
 
Seleccione una opcion <br> <br> 
 
<form name=color> 
<input type="Radio" name="radio1" onClick="VerColor()" value="" checked> Opcion 1 
<br> 
<input type="Radio" name="radio2" onClick="VerColor()" value="rojo"> Opcion 2 
<br> 
<input type="Radio" name="radio3" onClick="VerColor()" value="azul"> Opcion 3 
</form>

Naahuel · #2 (**permalink**) 07/09/2011, 21:39

Una opción muy linda es usar CSS3 :)

Código HTML:

Ver original<style>
input[type="radio"]:checked+label{
    color:red;
  } 
</style>
  <p><input type="radio" name="opcion" id="opcion1" />  <label for="opcion1">Opcion 1</label></p>
 <p><input type="radio" name="opcion" id="opcion2" />  <label for="opcion2">Opcion 2</label></p>
 <p><input type="radio" name="opcion" id="opcion3" />  <label for="opcion3">Opcion 3</label></p>

Claro que por ahora no hay muy buena compatibilidad. La opción con JavaScript yo la haría con jQuery por el hecho que es necesario un manejo relativamente avanzado de eventos, atributos, elementos, etc :P La hice bastante general para que pueda aplicarse fácilmente.

Asegurate de usar un enmarcado válido y como te lo indico en el ejemplo.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(function(){
     var colorChecked = '#F00';
     var colorNormal = '#000';
    $('input[type="radio"]').click(function(){
      var _radio = $(this);//obtener radiobutton cliqueado
      var _grupo = _radio.attr('name');//obtener grupo al que pertenece el radiobutton
      $('input[name="'+_grupo+ '"]').siblings('label').css('color',colorNormal); //poner en colorNormal todas las labels de ese GRUPO de radiobuttons
      var label = $('label[for="'+_radio.attr('id')+'"]');//obtener label correspondiente a este radiobutton
      if(_radio.is(':checked')){
        label.css('color',colorChecked);
      }else{
        label.css('color',colorNormal);        
      }
    });
  });
</script>
</head>
<body>
  <h2>Grupo 1</h2>
<p><input type="radio" name="opcion" id="opcion1" />  <label for="opcion1">Opcion 1</label></p>
<p><input type="radio" name="opcion" id="opcion2" />  <label for="opcion2">Opcion 2</label></p>
<p><input type="radio" name="opcion" id="opcion3" />  <label for="opcion3">Opcion 3</label></p>
  <h2>Grupo 2</h2>
<p><input type="radio" name="otra_opcion" id="opcion4" />  <label for="opcion4">Opcion 1</label></p>
<p><input type="radio" name="otra_opcion" id="opcion5" />  <label for="opcion5">Opcion 2</label></p>
<p><input type="radio" name="otra_opcion" id="opcion6" />  <label for="opcion6">Opcion 3</label></p>
</body>
</html>

Naahuel · #3 (**permalink**) 07/09/2011, 21:46

Me parece que esta opción es mejor, usando clases de CSS:

Código Javascript:

Ver original$(function(){
     $('input[type="radio"]').click(function(){
       var _radio = $(this);//obtener radiobutton cliqueado
       var label = $('label[for="'+_radio.attr('id')+'"]');//obtener label correspondiente a este radiobutton
       var _grupo = _radio.attr('name');//obtener grupo al que pertenece el radiobutton
       $('input[name="'+_grupo+ '"]').siblings('label').removeClass('chequeado'); //poner en colorNormal todas las labels de ese GRUPO de radiobuttons
       if(_radio.is(':checked')){
          label.toggleClass('chequeado');
        }else{
          label.toggleClass('chequeado');        
        }
     });
});