我如何启用/禁用收音机选择上的 div答案

【问题标题】：how do i enable / disable divs on radio selection我如何启用/禁用收音机选择上的 div
【发布时间】：2013-03-01 02:07:08
【问题描述】：

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

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

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

这里是 JS：

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

【问题讨论】：

感谢 cmets 以及解决此问题的不同方法。

标签： javascript html radio-button show-hide

【解决方案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

【讨论】：

【解决方案2】：

我会为每个输入添加一个data-pay 属性，其值等于您要显示的<div> 的id：

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

【讨论】：