как включить/отключить div при выборе радио

У меня есть форма, в которой я хочу предоставить 3 варианта оплаты мероприятия. Каждая опция является переключателем и содержит div с деталями платежа. Я хочу, чтобы эти div были скрыты до тех пор, пока не будет выбран переключатель.

Я создал JSfiddle с тем, что у меня есть на данный момент: http://jsfiddle.net/Kvg8M/1/

На данный момент мне удалось скрыть и отобразить все 3 элемента div, но я хочу показать только один набор деталей в зависимости от выбора радио и скрыть остальные.

Вот JS:

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

javascript html radio-button show-hide
person sampotts    schedule 01.03.2013    source источник
comment
Спасибо за комментарии и разные способы сделать это.   -  person sampotts    schedule 01.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Посмотрите на значение и покажите соответствующий 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;
        }
    });
});

СКРИПКА

person Barmar    schedule 01.03.2013

arrow_upward
2
arrow_downward

Я бы добавил атрибут 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');
  });
});

СКРИПКА

person Community    schedule 01.03.2013