Question

当选择单选按钮时，我需要能够在总价格中添加一个百分比。代码当前有效，但只为单选按钮添加了一个值。我需要这个，但也需要用addOns和+百分比来计算总计算价格。

有谁知道如何用Jquery改变这个？

提前致谢。

Jsfiddle：http://jsfiddle.net/4bitlabs/mGLfk/5/

HTML：

<div class="price">Estimate Price $<label for="amount1" class="total">0</label></div>

<p class="itemdesc1">How many "Linear Feet" of boards do you have?</p>
<input id="amount1" class="amount" data-for="amount1" />

<div class="addon"><input id="amount2" type="checkbox" value="10.00" class="radio addOn" data-for="amount1" />Add Red $10.00</div>

<div class="addon"><input id="amount3" type="checkbox" value="20.00" class="radio addOn" data-for="amount1" />Add Blue + 20%</div>

Jquery的：

$(function () {
    $('.amount').keypress(function () {
        changeAmount($(this));
    });

    $('.addOn').change(function () {
        var $original = $('#' + $(this).data('for'));
        changeAmount($original);
    });
});

function changeAmount($element) {
    var amount = 0;
    amount = parseFloat($element.val()) * 20;

    if (isNaN(amount)) {
        amount = 0;
    }

    var id = $element.attr('id');

    $('.radio:checked[data-for="' + id + '"]').each(function () {
        amount += parseFloat($(this).val());
    });

    $('label[for=' + id + ']').text(amount.toFixed(0))
}

Answer 1

好的，我会重写我从你的问题中理解的内容，如果我错了，请纠正我......

您有CHECKBOXES，并且您有一个输入，您可以在其中写下您想要购买的多个项目。然后，您想知道您购买的商品的最终价格，根据点击的CHECKBOX应用一些注意事项。

嗯，那就是说，我会首先确保你在任何变化时总是触发“添加功能”（比方说，你改变输入的数量，或者你点击一个复选框）。你几乎做到了，但你传递了一个参数，我认为没有必要。当您随时触发计算时，您将始终获得正确的结果。

其他方面，您需要区分“添加复选框”（为每个项目添加价格）和“百分比复选框”（在价格中添加一个百分比），以了解您必须添加的值。只需在复选框中添加clases即可区分它们。我会添加一个小提琴：

的变化：

复选框中的clasess，要知道我们想要对其中任何一个做什么，请注意添加和百分比 clasess：

<div class="addon"><input id="amount2" type="checkbox" value="10.00" class="radio addOn add" data-for="amount1" />Add Red $10.00</div>

<div class="addon"><input id="amount3" type="checkbox" value="20.00" class="radio addOn percentage" data-for="amount1" />Add Blue + 20%</div>

您的功能添加必须在您更改任何内容时随时调用，以便让您知道更改内容，并在更改值时将价格设置为零（可选）。

$('.amount').keydown(function () {
    $('.price label').text('0');
});

$('.amount').keyup(function () {
    changeAmount();
});

$('input:checkbox').change(function () {
    changeAmount();
});

最后，根据点击的复选框类别，进行不同的计算：

function changeAmount() {
    var $amount = 0;

    $amount = parseFloat( $('.amount').val() ) * 20;
    if (isNaN($amount)) {
        $amount = 0;
    }

    var $add = 0;
    $('.add:checked').each(function () {
        $add += parseFloat( $(this).val() );
    });

    // Calculate percentage of the Base product
    if ( $('.percentage').is(":checked") ) {
        $amount = $amount * (1 + $('.percentage').val()/100 );
    }

    var $total = parseFloat( $amount + $add );

    $('.price label').text( $total.toFixed(0) )
}

小提琴：http://jsfiddle.net/mGLfk/11/

希望它喜欢你！ XD

Answer 2

我想我明白了http://jsfiddle.net/mGLfk/10/ 首先，使用keyup而不是keypress。我为百分比和总和添加了两个单独的类。

function changeAmount($element) {
    var amount = 0;
    amount = parseFloat($element.val()) * 20;
    if (isNaN(amount)) {
        amount = 0;
    }
    var id = $element.attr('id');
    $('.sum.radio:checked[data-for="' + id + '"]').each(function () {
        amount += parseFloat($(this).val());
    });
    var percentage=100;
    $('.percent.radio:checked[data-for="' + id + '"]').each(function () {
        percentage += parseFloat($(this).val());
    });
    amount*=(percentage/100);
    $('label[for=' + id + ']').text(amount.toFixed(0))
}

Jquery输入无线电字段添加百分比

2 个答案:

的变化：