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

我有 2 组单选按钮和一个“金额”文本字段 (#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）中选择了“青年”并将第二个单选按钮更改为“数字”时，我得到的 #Amount 值为 25 美元而不是 10 美元。在我更改 .highflight-type 单选按钮选择时，我使用警报来确认 DOM 中的 .member-type 值。

4

2 回答 2

4

$('.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/

于 2013-09-02T19:21:27.197 回答
1

如果你只是改变

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

至

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

那么问题就解决了。

演示。

于 2013-09-02T19:29:24.593 回答