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」属性で試しました。これまでのところ、2 つのリストをレンダリングできましたが、それらをクリックした後 (ここでは最初のリストの Option3)、リストは以下のように 1 つのリストとして機能し始めました。

O option1 
O option2
O option3 (checked)
O option4

O option1 
O option2
O option3
O option4

スクリプトが両方のリストを単一のリストとして扱い始めるようです。これを進める方向性はありますか？
My Fiddle のリンクを更新
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 に答える