Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema marcar radio button diferentes

Estas en el tema de Problema marcar radio button diferentes en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/06/2012, 07:53
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 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!

Etiquetas: funcion, input, marcar, radio
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.