Foros del Web - Ver Mensaje Individual - Seleccionar radio cambiar color de texto, tiempo real

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>