Question

当我使用带有单选按钮的.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));
    });
});

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

Answer 2

如果我理解正确，您单击单选按钮时的投诉，则只会显示反映最近点击的值的小计。这是正确的吗？如果你发布了你正在使用的HTML code的剩余部分会有所帮助（我假设三明治的成分比面包更多）。

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

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

jquery函数中的小计（.click问题？）

2 个答案: