jquery - 将单选按钮的值相加

Question

我有一个表格，人们可以在其中选择不同的选项来建立订单，即他们首先选择一个基本价格，然后添加该价格。单选按钮被隐藏，标签样式被设置为可点击区域。

要求包括能够取消选择单选按钮(即，如果需要，您可以将您的选择重置回空)，我在下面的代码中可以正常工作。

我还必须将值写入页面上的其他元素。这也工作正常。

将不同组单选按钮的值添加在一起是不正确的。

$('.order-option + label').click(function(e) {

    var radio = $(this).attr('for');
    radio = $('#' +radio );

    var spec_price = 0;
    var env_price = 0;

    switch($(radio).attr('name')) {
        case 'specifications':
            spec_price = parseInt(radio.val());
        break;
        case 'envelopes':
            env_price = parseInt(radio.val());
        break;
    }

    var total_price = +spec_price + env_price;

    var desc = radio.data('title');

    if(radio.is(':checked')) {
        e.preventDefault();
        radio.removeAttr('checked');
    }

    $('.order-preview-total').html('$'+total_price+' (inc gst)');
    $('#order-preview-total').val('$'+total_price+' (inc gst)');
    $('.order-preview-content').html(desc);
    $('#order-preview-content').val(desc);

});

当我单击第二行单选按钮时，它只是覆盖价格，而不是添加价格。

如果再次取消选择所有单选按钮，也不会将总数重置为 0。

带有类名的元素(例如 .order-preview-total)是显示信息的元素，带有 ID 的元素是隐藏的表单元素，用于将数据传递到另一个表单。

编辑

根据要求，我创建了一个 JSFiddle 。如果单击第二行中的任何按钮，该值应添加到您在第一行中已选择的按钮中。如果您再次单击已选择的选项(即取消选择它)，则应再次减去该值。

Answer 1

好吧，我想在总价的情况下，您需要在函数外部声明您的total_price变量并将其设置为等于0，否则每次单击单选按钮时它都会覆盖它。

如果选中按钮，则减去值。没有 HTML 很难说，但在我看来，您需要修改 if 语句，如下所示:

if(radio.is(':checked')) {
    e.preventDefault();
    var subtract = parseInt(this.val());
    total_price = total_price - subtract;
    radio.removeAttr('checked');
}