Question

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

我创建了一个JSfiddle，其中包含了我目前所拥有的内容：http://jsfiddle.net/Kvg8M/1/

目前，我已设法隐藏所有3个div并同时出现，但我只想根据无线电选择显示一组细节并隐藏其他信息。

这是JS：

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

Answer 1

查看该值并显示相应的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

Answer 2

我会为每个输入添加data-pay属性，其值等于您要显示的id的{{1}}：

<强> HTML：

<div>

<强>使用Javascript：

<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"/>

FIDDLE

如何在无线电选择上启用/禁用div

2 个答案: