как да активирам/деактивирам divs при избор на радио

Имам формуляр, в който искам да предоставя 3 опции за плащане за събитие. Всяка опция е бутон за избор и съдържа div с данните за плащането. Искам тези divs да бъдат скрити, докато не бъде избран бутон за избор.

Създадох 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;
        }
    });
});

FIDDLE

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');
  });
});

FIDDLE

person Community    schedule 01.03.2013