0

イベントの支払いに 3 つのオプションを提供したいフォームがあります。各オプションはラジオ ボタンであり、支払いの詳細を含む div が含まれています。ラジオ ボタンが選択されるまで、これらの div を非表示にします。

現在持っているものでJSfiddleを作成しました：http://jsfiddle.net/Kvg8M/1/

現時点では、3 つの div すべてを非表示にして同時に表示することができましたが、ラジオの選択に応じて 1 つの詳細セットのみを表示し、他のものを非表示にしたいと考えています。

JS は次のとおりです。

$(document).ready(function () {
    $(".paymentmethod").click(function () {
        $(".paymentinfo").show('slow');
    });
});
4

2 に答える 2

2

表示したいのdata-payと等しい値を持つ属性を各入力に追加します。id<div>

HTML:

<input type="radio" value="Direct Deposit" id="CAT_Custom_249152_0" name="CAT_Custom_249152" class="paymentmethod" data-pay="pay0"/>
<input type="radio" value="Credit Card Authorisation" id="CAT_Custom_249152_1" class="paymentmethod" name="CAT_Custom_249152" data-pay="pay1"/>
<input type="radio" value="Cash at FAA Office (In Person)" id="CAT_Custom_249152_2" class="paymentmethod" name="CAT_Custom_249152" data-pay="pay2"/>

Javascript:

$(document).ready(function () {
  $(".paymentmethod").click(function () {
    $('.paymentinfo').hide();
    $('#'+$(this).data('pay')).show('slow');
  });
});

フィドル

于 2013-03-01T03:04:04.657 に答える
2

値を見て、適切な DIV を表示します。

$(document).ready(function () {
    $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
            case "Direct Deposit":
                $("#pay0").show("slow");
                break;
            case "Credit Card Authorisation":
                $("#pay1").show("slow");
                break;
            case "Cash at FAA Office (In Person)":
                $("#pay2").show("slow");
                break;
        }
    });
});

フィドル

于 2013-03-01T02:47:34.067 に答える