0

当我使用带有单选按钮的 .hasVal 类时，此函数仅对我最后一次单击的值进行小计。有任何想法吗？

更新：这是 jsfiddle 链接：http: //jsfiddle.net/SUKsM/4/

本质上，我的 HTML 表单有一个带有值的字段集：

<fieldset id="breadOptions" class="hidden">
    <legend>Select one</legend>
    <input type="radio" name="breadType" id="breadWhite" class="hasVal" value=".5,260" /> White (260 calories)<br />
    <input type="radio" name="breadType" id="breadWheat" class="hasVal" value=".5,360" /> Wheat (360 calories)<br />
</fieldset>​

这是脚本：

$(function () {
    var basePrice = 3;
    var totalCal = 0;
    var taxRate = .07;
    $('#total').text(basePrice.toFixed(2));
    $('#sub').text(basePrice.toFixed(2));
    $('#cal').text(totalCal);
    $('#tax').text((taxRate * 100).toFixed(2));

    $('.hasVal').click(function () {
        var price = 0;
        var totalCal = 0;
        var tar = event.currentTarget;
        var optArr = tar.value.split(','); //cost,calorie

        price += parseFloat(optArr[0]);
        totalCal += parseInt(optArr[1]);

        $(':checked').each(function () {
            totalPrice = (price + basePrice);
        });

        $('#sub').text(totalPrice.toFixed(2));
        $('#cal').text(totalCal);

        totalTax = totalPrice + (totalPrice * taxRate);
        $('#total').text(totalTax.toFixed(2));
    });
});
4

2 回答 2

1

您可以对价格和卡路里使用 HTML5 数据属性，如下所示：

<input type="radio" ... data-cost=".5" data-cal="260" value="white" /> White (260 calories)
<input type="radio" ... data-cost=".5" data-cal="360" value="wheat" /> Wheat (360 calories)

当您将总价格和卡路里相加时，像这样迭代所有选定的单选按钮，而不仅仅是当前的单选按钮：

$('input:radio:checked').each(function() {
    var input = $(this);
    price += parseFloat(input.attr('data-cost'), 10);
    cal += parseInt(input.attr('data-cal'), 10);
});

这是一个工作示例：http: //jsfiddle.net/ncCgu/

如果您不能使用 HTML5 数据属性，以下是一个示例：http: //jsfiddle.net/z55rd/

于 2012-12-04T02:52:29.460 回答
1

如果我对您的理解正确，您的投诉是当您单击单选按钮时，您只会显示一个反映您最近单击的值的小计。这是正确的吗？如果您发布HTML code您正在使用的其余部分会有所帮助（我假设三明治的成分不仅仅是面包）。

现在，我已将您的代码放入 jsFiddle 中：http: //jsfiddle.net/devlshone/SUKsM/并进行了一些更改。

一旦您解释了更多内容并提供了更多内容HTML code，我将很乐意为您提供进一步的帮助。

于 2012-12-04T03:04:36.173 回答