Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/06/2012, 07:53
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 18 años
Puntos: 20
Problema marcar radio button diferentes

Buenas,

Estoy implementando un sistema de radio button personalizado con imagenes, y he conseguido que funcione correctamente con dos radio buttons (yes/no).

El problema es que necesito crear varios, y con varios el comportamiento se entre cruza entre todos, vamos que si apreto el SI del primero igual me desmarca los otros que estaban en NO.

Sé donde puede estar el problema y es a la hora de identificar el ambito de acción de cada radio button, que no interfluyan con el resto, pero no se resolverlo.

¿Alguien me puede echar una mano a resolverlo?

El código es el siguiente:

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.    
  3.     /* Mira si hay alguno marcado por defecto y añade la clase selected en la vista*/
  4.     $(".checklist li input:checked").parent().addClass("selected");
  5.    
  6.     /* Selección del usuario */
  7.     $(".checklist li.yes").click(
  8.         function(event) {
  9.             event.preventDefault();
  10.             if($(this).parent().find(":radio").is(':checked')) {
  11.                 $(".checklist li.no").removeClass("selected");
  12.                 $(".checklist li.no").find(":radio").removeAttr("checked");
  13.                 $(this).addClass("selected");
  14.                 $(this).find(":radio").attr("checked","checked");
  15.             }else{
  16.                 $(this).addClass("selected");
  17.                 $(this).find(":radio").attr("checked","checked");
  18.             }
  19.         }
  20.     );
  21.     $(".checklist li.no").click(
  22.         function(event) {
  23.             event.preventDefault();
  24.             if($(this).parent().find(":radio").is(':checked')) {
  25.                 $(".checklist li.yes").removeClass("selected");
  26.                 $(".checklist li.yes").find(":radio").removeAttr("checked");
  27.                 $(this).addClass("selected");
  28.                 $(this).find(":radio").attr("checked","checked");
  29.             }else{
  30.                 $(this).addClass("selected");
  31.                 $(this).find(":radio").attr("checked","checked");
  32.             }
  33.         }
  34.     );
  35.    
  36. });

Código HTML:
Ver original
  1. <form action="">
  2.         <fieldset>
  3.             <ul class="checklist">
  4.                 <li class="yes">
  5.                     <input name="jqdemo" value="value1" type="radio" id="choice_a" />
  6.                 </li>
  7.                 <li class="no">
  8.                     <input name="jqdemo" value="value2" type="radio" id="choice_b"/>
  9.                 </li>
  10.             </ul>
  11.            
  12.             <!-- nuevo checklist  -->
  13.             <ul class="checklist2">
  14.                 <li class="yes">
  15.                     <input name="jqdemo2" value="value3" type="radio" id="choice_c" />
  16.                 </li>
  17.                 <li class="no">
  18.                     <input name="jqdemo2" value="value4" type="radio" id="choice_d"/>
  19.                 </li>
  20.             </ul>
  21.            
  22.             <div style="clear: both;"></div>
  23.             <button class="sendit" type="submit" name="submitbutton" title="Submit the form">Send it!</button>
  24.         </fieldset>
  25.     </form>


Muchas gracias de antemano!