Jquery 输入单选字段添加百分比

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

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

您有复选框，并且您有一个输入框，您可以在其中写下您想购买的许多物品。然后，您想知道所购买商品的最终价格，根据单击的 CHECKBOX 应用一些注意事项。

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

另外，您需要区分“添加复选框”（为每件商品添加价格）和“百分比复选框”（在价格中添加百分比），以了解您必须添加的价值。只需在您的复选框中添加分类以区分它们。我将添加一个小提琴：

变化：

复选框中的类别，要知道我们想对其中的任何一个做什么，请注意 add 和 percentage 类别：

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

希望它喜欢你！呵呵

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))
}