1

我正在使用这个非常酷的库来修改传统的 RadioButtonLists。
Image Tick V 2.0
但是我如何使用它来播放多个 RadioButtonList，如下所示

O option1 (Checked)
O option2
O option3
O option4

O option1 (checked)
O option2
O option3
O option4

尝试使用不同的“名称”和“id”属性。到目前为止能够呈现两个列表，但是在单击它们之后（这里是第一个列表上的 Option3），列表开始充当一个列表，如下所示

O option1 
O option2
O option3 (checked)
O option4

O option1 
O option2
O option3
O option4

就像脚本开始将两个列表视为一个列表一样。有什么方向可以继续前进吗？
更新了我的小提琴链接
http://jsfiddle.net/skriyas/mctcs/236/

4

1 回答 1

2

根据图像勾选示例。只需确保您按名称对单选输入按钮进行分组。然后在脚本中你应该有这样的代码。 

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

 });
于 2012-06-07T18:00:11.643 回答