使用圖像滴答滴答jQuery的多RadioButtonList

Question

我使用這個非常酷的庫來修改傳統的RadioButtonLists。
Image Tick V 2.0
但我怎麼使用這個對於有多個單選按鈕列表播放，像下面

O option1 (Checked) 
O option2 
O option3 
O option4 

O option1 (checked) 
O option2 
O option3 
O option4 

不同的「名稱」和「ID」試圖屬性。到目前爲止，能夠使兩個列表，但是點擊它們（這裏2選項第一個列表上）之後，列表開始作爲一個列表類似下面

O option1 
O option2 
O option3 (checked) 
O option4 

O option1 
O option2 
O option3 
O option4 

它像劇本開始治療既列爲一個單子。任何方向繼續前進？
更新了我的小提琴鏈接
http://jsfiddle.net/skriyas/mctcs/236/

Answer 1

根據圖像蜱例子。只要確保每個人都按照他們的名字對無線電輸入按鈕進行分組。然後在腳本中你應該有這樣的代碼。

$("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 
}); 

在他們的榜樣，他們的名字，所以如果你複製的代碼，你必須複製/粘貼代碼多次對各組

編輯選擇單選元素：

在你您不檢查腳本是否在同一組中。我已經用這張支票更新了小提琴，現在它應該可以工作。使用過濾器可能有更好的方法，但我還不太好。
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); 

});