0

我有一个表格，我想在其中提供 3 个选项来支付活动费用。每个选项都是一个单选按钮，并包含一个带有付款详细信息的 div。我希望在选择单选按钮之前隐藏这些 div。

我用我目前拥有的东西创建了一个 JSfiddle：http: //jsfiddle.net/Kvg8M/1/

目前，我已经设法让所有 3 个 div 都被隐藏并同时出现，但我只想根据收音机选择显示一组细节并隐藏其他细节。

这是JS：

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

2 回答 2

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 回答
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 回答