Question

我有以下简单的Jquery代码，它将输入数字*价格提供给总数。

我还需要包含带单选按钮的选项，如果选中+添加到总计。

任何人都可以帮助我，这样我就可以添加单选按钮选项，使得输入+单选按钮获得总价吗？

**如果价格是您在键入/收音机时检查的价格而不是点击提交，但也不是必须，这也很好。

到目前为止我有这个： http://jsfiddle.net/4bitlabs/tpkpd/15/

HTML：

<p class="list">How many "Linear Feet" of boards do you have?</p>
<input id="amount" />
<div class="addon">Add Paint $10.00<input id="amount" type="radio"value="10.00" class="radio"/></div>
<div class="price">$<label for="amount">0.00</label></div>

JQuery的：

$(function () {
$('#amount').change(function () {
     var $this = $(this);

    $('label').text((parseFloat($this.val()) * 20.00).toFixed(2))            
});        
});

提前致谢。

Answer 1

您的HTML存在一些问题。 ID应该是唯一的。

我做了一次相当重要的改写，我认为它会做你想要的。还有其他方法可以做到这一点，但它应该让你开始

<input id="amount1" class="amount" />

我已将ID设为唯一，并为输入框提供了一个类。

<input id="amount2" type="radio" value="10.00" class="radio addOn" data-for="amount1" />

单选按钮也有一类“addOn”，并通过“data-for”标签附加到标签上。

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

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

有两种方法可以更改金额，一种是通过使用类amount更改输入框，一种是通过更改addOn类的单选按钮。唯一的区别是单选按钮功能可以确定与之关联的输入框。

function changeAmount($element) {
    var amount = 0;
    amount = parseFloat($element.val()) * 20;
    // this handles the case when the val is not filled in.
    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(2))
}

jsFiddle

Answer 2

使用checked属性。最好不要使用重复的ID。

$(function () {
  $('#amount').change(function () {
    var $this = $(this);
    var addPoint = $('input[type="radio"]').prop('checked') ? 10 : 0;

    $('label').text((parseFloat($this.val()) * 20.00 + addPoint).toFixed(2))            
  });        
});

带输入框和单选按钮的Jquery总价

2 个答案: