0

フィドルhttp://jsfiddle.net/4QZED/2/を作成しました。（Explosion Pillsの更新バージョン-http://jsfiddle.net/ExplosionPIlls/4QZED/4/）通常のラジオを表示したり、ラジオを画像に置き換えたりする代わりに。ボタンに扮したdivに置き換えたいのですが、ホバーするとクラスが変更され、クリックするとクラスが変更されます。また、クリックすると、非表示のラジオが選択されます。ただし、ラベル（たとえば、以下の.co.uk .com .netなどを示すテキストを参照するラベル）をdiv/button内に配置する必要もあります。または、divボタンにテキストを追加できます。これは可能ですか？

$(function() {
    $("input [name='domain_ext']").each(function() {
        if ($(this).prop('checked')) {
            $(this).hide();
            $(this).after($("<div class='radioButtonOff'> label </div>"));
        } else { 
            $(this).hide();
            $(this).after($("<div class='radioButtonOff'> label </div>"));
        }
    });

    $("input.radio").click(function() {
        if($(this).attr('src') == 'radiobuttonOn') {
            $(this).attr('src', 'radiobuttonOff');
            $(this).prev().attr('checked', 'false');
        } else { 
            $(this).attr('src', 'radioButtonOn');
            $(this).prev().attr('checked', 'true');
        }
    });
});
4

1 に答える 1

5

私はあなたのソリューションを改善して、あなたが望むように機能させることを試みました。いくつかのエラーがありました。input[name=domain_ext]最も重要なのは、との間に非常に重要な違いがあることですinput [name=domain_ext]（スペースは子孫セレクターです）。また$(this)、checkedイベントでdivを明らかに変更するために使用していましたが、イベントは入力にバインドされていました。との間にも違いがinput.radioありinput[type=radio]ます。

$("input[name='domain_ext']").each(function() {
    if ($(this).prop('checked')) {
        $(this).hide();
        $(this).after("<div class='radioButtonOff'> label </div>");
    } else { 
        $(this).hide();
        $(this).after("<div class='radioButtonOff'> label </div>");
    }
});

$("input[type=radio]").change(function() {
    $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});

http://jsfiddle.net/ExplosionPIlls/4QZED/4/

于 2013-03-12T02:20:20.160 に答える