jquery cambiar estilo radio button si checked

red_robe · #1 (**permalink**) 27/02/2012, 10:57

hola, mediante jquery necesito saber que radioButton fue pulsado para modificar un estilo del .css. en total tengo 5 input radio.

Código:

if ($('input: radio: checked')) //funciona
{
   $(this).css("background-color","red");
}

el caso es que necesito poner en color rojo sólo el que fue pulsado y no todos los radio, pero no encuentro solución.
(no sé si es correcto poner if ($('input: radio: checked')) ya que es muy genérico)

¿¿alguna ayuda?? gracias

red_robe · #2 (**permalink**) 28/02/2012, 15:35

nadie???? :(

Naahuel · #3 (**permalink**) 28/02/2012, 18:00

Que yo sepa no se puede cambiar el fondo a un radiobutton. Al menos en Chrome y FF no lo hace.

Lo que yo haría es asignar una clase para tildado con los estilos que querés que tenga. Después con jQuery le das esa clase al hacer click, pero antes se la quitás a todos los que la tengan.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  
<style>
  .tildado{
    width:300px;
  }
  </style>
<script>
  $(function(){
      $('input[type="radio"]').on('click',function(){
       $('input[type="radio"].tildado').removeClass('tildado');
        $(this).addClass('tildado');
    });
  });
  </script>
</head>
<body>
  <p><label for="radio1">Opcion 1</label><input type="radio" id="radio1" name="radiogrupo" /></p>
  <p><label for="radio2">Opcion 2</label><input type="radio" id="radio2" name="radiogrupo" /></p>
</body>
</html>

Te lo pongo como ejemplo, pero tiene muchas faltas. La más grave es que no vas a poder agrupar los radiobuttons. O sea, si tenés más de un grupo, cuando hagas click en alguno de ellos la clase se le va a quitar sin importar si pertenece a otro grupo.

red_robe · #4 (**permalink**) 01/03/2012, 02:59

gracias Naahuel! he añadido una clase tildado en el css con lo que quiero que haga al clicar el radio

te comento, cada radioButton tiene una imagen asociada y la idea es que al clicar a uno de los radio buttons, se cambie el borde del tag <img> , pero no consigo acceder al <img>

Código:

<div class="attributesImg">
              <input type="radio" id="attrib-2-50" value="50" name="id[2]"><br>
              <label for="attrib-2-50" class="attribsRadioButton five">
                       <img height="30" width="30" alt="" src="img01.jpg">
               </label>
</div>

notar que el tag imagen está dentro del <label> pero <label> no está dentro del <input radio> (entiendo que no es hijo)

Gracias por la info

Naahuel · #5 (**permalink**) 01/03/2012, 05:19

Y entonces asignale la clase a los labels usando .sibligins()

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
label{
    display:block;
}
.tildado img{
    border:1px solid red;
}
</style>
<script>
$(function(){
    $('input[type="radio"]').on('click',function(){
        var id = $(this).attr('id');
        $('label.tildado').removeClass('tildado');
        $(this).siblings('label[for="'+id+'"]').addClass('tildado');
    });
});
</script>
</head>
<body>
    <div class="attributesImg">
        <p>
            <input type="radio" id="attrib-2-50" value="50" name="id[2]">
            <label for="attrib-2-50" class="attribsRadioButton five">
                <img height="30" width="30" alt=""  src="http://www.bancogalicia.com/eGalicia/Home/HOMES/Home_Eminent/img/bullet_destacado4.png" />
            </label>
        </p>
 
        <p>
            <input type="radio" id="attrib-2-51" value="50" name="id[2]">
            <label for="attrib-2-51" class="attribsRadioButton five">
                <img height="30" width="30" alt="" src="http://www.bancogalicia.com/eGalicia/Home/HOMES/Home_Eminent/img/bullet_destacado4.png" />
            </label>
        </p>
    </div>
</body>
</html>

Acomodé un poco tu código. Tratá de no usar <br> para hacer eso que hiciste, siempre se puede lograr con CSS.

Repito que ese código no es bueno pues es muy particular para ese caso tuyo y para ese enmarcado y no contempla múltiples grupos de radiobuttons.

Saludos.

red_robe · #6 (**permalink**) 01/03/2012, 06:00

Muchas Gracias!! ya casi funciona maestro, he tenido que hacer una adaptación para que pinte el bordeado en el tag <img> y no en el label (children('img')

al clicar marca bien el bordeado, el problema es al clicar una segunda imagen que no desmarca la primera ni las anteriores. creo que el problema está en el removeClass

Código:

$('label.tildado').children('img').removeClass('tildado');
				$(this).siblings('label[for="'+id+'"]').children('img').addClass('tildado');

Alguna ayuda??? Graciassss

red_robe · #7 (**permalink**) 01/03/2012, 06:20

ya funciona, gracias!

solución:

Código HTML:

$('label > img.tildado ').removeClass('tildado');
				$(this).siblings('label[for="'+id+'"]').children('img').addClass('tildado');

edito1: y para marcar uno inicalmente por defecto?
edito2: mierda, en IE no funciona. existe alguna posibilidad? Chrome y Firefox perfecto