0

オプションのラジオ ボタンを使用して、HTML でフォームを作成しようとしています。ラジオ ボタンは、個別のクリック可能なサムネイル イメージである必要があります (したがって、ブラウザ スタイルのラジオ ボタンは表示されず、各ラジオ ボタンは異なります)。ラジオ ボタンの 3 つのグループがあり、それぞれに 3 つのオプションがあります。

これらは、ユーザーが選択したオプションに基づいて、ページの他の場所に大きなメイン画像を表示するために、最後に結合する必要があります。

ユーザーが各オプションを選択すると、メイン画像が動的に変化するようにします。- 送信ボタンが最後にあるフォームは必要ありません。

アイデアはありますか？

私がこれまでに持っているコードは次のとおりです。

    <style>
label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;                   
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script type="text/javascript">   
$(function() {
    $('input[type=radio].radio-image').each(function() {
        var id = this.id;
        $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
    });
    $('.newrad').live('click', function(e) {
        e.preventDefault();
        var $check = $(this).prev('input');
        $('.newrad div').attr('class', 'radio');
        $(this).find('div').addClass('checked');
        $('input[type=radio].radio-image').attr('checked', false);
        $check.attr('checked', true);
    });
});

    $(document).ready(function() {
        $("input:radio[name=wardrobe]").change(function() {
            if (this.value == "a") {
                $("#imgOne").attr(
                    'src', 'a.jpg'
                );
            }
            else {
                $("#imgOne").attr(
                    'src', 'b.jpg'                   
                );
            }
        });
    });
</script>

</head>

<body>


<form>
 <label><input type="radio" class="radio-image" name="wardrobe" id="single"    value="a" />A</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="double"  value="b" />B</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
 </form>


<img id="imgOne" />


</body>

これは部分的なコードにすぎません。オプションの最初のセットでは、これを出発点として使用しました。

サムネイルをラジオボタンとして取得することができました。これはうまく機能します。そして、通常のラジオボタンで画像を交換することができました。しかし、私は両方を一緒に動作させることはできません。

4

1 に答える 1