Question

i’m using this really cool library for modifying the traditional RadioButtonLists.
Image Tick V 2.0
But how do i use this for playing with Multiple RadioButtonList, like below

O option1 (Checked)
O option2
O option3
O option4

O option1 (checked)
O option2
O option3
O option4

tried with different “Name” and “id” attributes. So far was able to render two lists, but after clicking on them (here Option3 on first list), the Lists started to act as one list like below

O option1 
O option2
O option3 (checked)
O option4

O option1 
O option2
O option3
O option4

Its like the script starts to treat both the lists as a single list. Any direction to proceed forward with this?
Updated My Fiddle link
http://jsfiddle.net/skriyas/mctcs/236/

Answer 1

According to the image tick examples. Just make sure each you are grouping the radio input buttons by their name. Then in the script you should have code like this.

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

In their example they were selecting the radio element by name so if you copied that code you would have to copy/paste the code multiple times for each group

EDIT:

In your script you are not checking if they are in the same group or not. I’ve updated the fiddle here with the check and it works as it should now. There’s probably a better way using filter but I’m not too good with it yet.
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);

 });