Question

我正在尝试创建一个包含各种隐藏/显示的表单，并且我需要对此表单执行的最后一个部分之一是在仅选择信用卡时显示付款信息字段。

我在此设置了测试页：http://www.faa.net.au/test/femmes-member-form.html

到目前为止的流程是：

输入您的详细信息
选择活动日期
选择会员+ 1位或更多客人要求付款详情
目前，我已经显示了我想要显示的3个DIV，具体取决于所选的无线电选择，但是当我隐藏它们时，我现有的代码不起作用。

有人可以帮助我吗？

如果您需要代码，请告诉我，涉及到许多不同的元素我不想将整个内容粘贴到此处，希望您能看到源代码？

这是我目前使用的Javascript，但不确定这是错误还是与其他内容冲突？

        <script type="text/javascript">
        $(function() {
            $('.cat_dropdown').change(function() {
                $('#payMethod').toggle($(this).val() >= 2);
            });
        });     
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".payOptions").click(function () {
                $(".paymentinfo").hide();
                switch ($(this).val()) {
                    case "Credit Card Authorisation":
                        $("#pay0").show("slow");
                        break;
                    case "Direct Deposit":
                        $("#pay1").show("slow");
                        break;
                    case "Cash Payment (FAA Office)":
                        $("#pay2").show("slow");
                        break;
                }
            });
        });
    </script>

Answer 1

根据View Souce中的查看代码并猜测您没有在事件处理程序中添加正确的类。因此无法调用无线电的点击事件。

更改

$(".payOptions").click(function () {

到

$(".paymentmethod").click(function () {

Answer 2

您尚未发布任何来源，但如果您使用的是jQuery，则只需执行以下操作：

$(".commonclass").hide();

前提是所有3个div都有“commonclass”类。

Answer 3

流程是这样的：

开始清理：隐藏所有付款方式
您的广播输入具有paymentmethod类，因此请将更改事件侦听器附加到这些元素
选择其中一个无线电时，隐藏所有付款方式，使用index确定要显示的付款方式，并显示该div

$('#pay0, #pay1, #pay2').hide();

$('input.paymentmethod').on('change', function(){
  $('#pay0, #pay1, #pay2').hide();
  var selected = $('input.paymentmethod').index($('input.paymentmethod:checked'));
  $('#pay'+selected).show();
});

Answer 4

用于jquery 就像这样

<强>的CSS

#pay0, #pay1, #pay2{display:none;}

<强> Jquery的

$(document).ready(function(){

    $('#payment').change(function(){
        if($('#CAT_Custom_255277_0').attr('checked')){
            $('#pay0').show();
            $('#pay1').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_1').attr('checked')){
            $('#pay1').show();
            $('#pay0').hide();
            $('#pay2').hide();
        }
        else if($('#CAT_Custom_255277_2').attr('checked')){
            $('#pay2').show();
            $('#pay0').hide();
            $('#pay1').hide();
        }
    });

});

<强> Demo

Answer 5

根据我的理解，你正在尝试如下，

从dropdown中选择值，如果value !== "1"然后显示付款单选按钮
根据radio按钮选择，您希望显示相应的div

从查看源代码开始，您似乎正在使用jQuery lib并使用此

$(document).ready(function() {
    $('input[type=dropdown]').on('change', function(){
        if($(this).val() !== 1)
            {
                $('input[type=radio]').show();
            }
    }

    $('input[type=radio]').on('change', function(){
        if($(this).val() === "Credit Card Authorisation") {
            $('#pay1').hide();
            $('#pay2').hide();
            $('#pay0').show();
        }
        else if($(this).val() === "Direct Deposit"){
            $('#pay0').hide();
            $('#pay2').hide();
            $('#pay1').show();
        }
        else if($(this).val() === "Cash Payment (FAA Office)"){
            $('#pay0').hide();
            $('#pay1').hide();
            $('#pay2').show();
        }   
    });
});

希望你明白。

隐藏/显示多个Div

5 个答案: