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

Question

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

有人知道我如何用Jquery改变这一点吗？

提前谢谢。

Js文件：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

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

您有复选框，并且有一个输入框，您可以在其中写入要购买的许多项目。然后，你想知道你购买的物品的最终价格，根据点击的复选框应用一些考虑因素。

好吧，也就是说，我首先要保证，当任何事情发生变化时(比如说，你改变了输入的数量，或者你点击了一个复选框)，你总是会触发一个"添加功能"。你几乎做到了，但你传递了一个参数，我认为这没有必要。当你随时触发计算时，你总是会得到正确的结果。

另外，您需要区分"添加复选框"(为每个项目添加价格)和"百分比复选框"，以了解您必须添加的值。只需在复选框中添加冲突即可区分它们。我要加一把小提琴：

更改：

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

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

您的函数adding必须在任何时候更改任何内容时调用，以便您知道更改了什么，并在更改值时将价格设置为零(可选)。

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