Question

<input type="radio" name="CAT_Custom_332258_327" value="Standard" class="member-type" />
<input type="radio" name="CAT_Custom_332258_327" value="Youth" class="member-type" />
<input type="radio" name="CAT_Custom_332258_327" value="Family Add-On" class="member-type" />

<input type="radio" name="highflight" value="print" class="highflight-type" />
<input type="radio" name="highflight" value="digital" class="highflight-type" />
<input type="radio" name="highflight" value="printdigital" class="highflight-type" />

我有两组单选按钮和一个“Amount”文本字段（#Amount）。当我更改第二个单选按钮组（.highflight-type）中的选择时，它应该根据两个单选按钮组的值更新Amount文本字段。

$(".highflight-type").click(function(){

                if($(this).val()=="print") {
                    if($('.member-type').val()=="Standard") {
                        $('#Amount').val('35');
                    }
                    if($('.member-type').val()=="Youth") {
                        $('#Amount').val('35');
                    }
                }

                if($(this).val()=="digital") {
                    if($('.member-type').val()=="Youth") {
                        $('#Amount').val('10');
                    }
                    if($('.member-type').val()=="Standard") {
                        $('#Amount').val('25');
                    }
                }
                if($(this).val()=="printdigital") {
                    if($('.member-type').val()=="Standard") {
                        $('#Amount').val('50');
                    }
                    if($('.member-type').val()=="Youth") {
                        $('#Amount').val('35');
                    }
                }
            });

但是，当我在第一个单选按钮组（.member-type）中选择“Youth”并将第二个单选按钮更改为“digital”时，我得到的$Amount值为$ 25而不是$ 10。我在改变.highflight类型单选按钮选择时使用了一个警告来确认DOM中的.member类型值。

Answer 1

$('.member-type').val()将始终返回第一个value单选按钮的.member-type。

相反，您应该过滤单选按钮以找到已选中的按钮，并获取单选按钮的值：

var $types = $('.member-type');
var $amount = $('#Amount');
var pricing = {
    print: {
        Standard: 35,
        Youth: 35
    },
    digital: {
        Standard: 25,
        Youth: 10
    },
    printdigital: {
        Standard: 50,
        Youth: 30
    }
};

$(".highflight-type").change(function() {

    if ( ! this.checked ) return;

    $amount.val(
        pricing[ this.value ][ $types.filter(':checked').val() ]
    );
});

这是小提琴：http://jsfiddle.net/C8kZq/

Answer 2

如果你只是改变

if($('.member-type').val()=="...")

到

if($('.member-type:checked').val()=="...")

然后问题就解决了。

DEMO.

嵌套的jQuery IF语句不起作用

2 个答案: