en utilisant Image Tick jQuery pour plusieurs RadioButtonList

Question

J'utilise cette bibliothèque vraiment cool pour modifier les RadioButtonLists traditionnels.
Image Tick V 2.0
Mais comment puis-je l'utiliser pour jouer avec RadioButtonList multiples, comme ci-dessous

O option1 (Checked) 
O option2 
O option3 
O option4 

O option1 (checked) 
O option2 
O option3 
O option4 

essayé avec différents « Nom » et « id » attributs. Jusqu'à présent, a pu rendre deux listes, mais après avoir cliqué sur sur eux (ici Option3 sur la première liste), les listes ont commencé à agir comme une seule liste comme ci-dessous

O option1 
O option2 
O option3 (checked) 
O option4 

O option1 
O option2 
O option3 
O option4 

est comme le script commence à traiter à la fois les listes que une seule liste. Toute direction pour aller de l'avant avec cela?
mis à jour mon lien Fiddle
http://jsfiddle.net/skriyas/mctcs/236/

Answer 1

Selon les exemples de tiques d'image. Assurez-vous que vous avez groupé les boutons d'entrée radio par leur nom. Ensuite, dans le script, vous devriez avoir un code comme celui-ci.

$("input:radio").imageTick({ // target all the radio buttons instead of selecting by name 
    tick_image_path: "images/radio.gif", // the image you want to use as a selected state of the radio/checkbox 
    no_tick_image_path: "images/no_radio.gif", // image you want to use as a non selected state 
    image_tick_class: "radios" // the class you want to apply to all images that are dynamically created 
}); 

Dans leur exemple, ils choisissaient l'élément radio par nom, donc si vous copié ce code que vous auriez à copier/coller le code plusieurs fois pour chaque groupe

EDIT:

Dans votre script que vous ne vérifiez pas s'ils sont dans le même groupe ou non. J'ai mis à jour le violon ici avec le chèque et ça fonctionne comme il se doit maintenant. Il y a probablement une meilleure façon d'utiliser le filtre, mais je ne suis pas encore très bon avec ça.
http://jsfiddle.net/mctcs/237/

$("#tick_img_"+id).click(function(){ 
      var thisGroup=$(this).next('input').attr('name'); // This is the clicked group   
       $("." + opt.image_tick_class).each(function() { 
        if($(this).next('input').attr('name') === thisGroup){ // check to only modify clicked gruop 
        //console.log($(this).attr('name')); 
        var r = this.id.split("_"); 
        var radio_id = r.splice(2,r.length-2).join("_"); 
        $(this).attr('src', no_tick_image_path(radio_id)); 
        } 
       }); 
       $("#" + id).trigger("click"); 

       $(this).attr('src', tick_image_path); 

});