如何在下拉式和无线电选择中自动求和

Question

我正在处理一个自动计算表格，这是一个总列将改变后，收音机和一个下拉菜单被点击。我可以对这两个下拉列表进行总体更改，但是当我尝试添加一个收音机选项时，问题就会发生。这是我的密码。

Ages 10+:
<select id="Adult" name="Adult">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />Ages 3-9:
<select id="Child" name="Child">
    <option selected="selected" value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>
<br />Food
<input type="radio" name="food" id="food0" value="0" />
<label for="food0">No</label>
<input type="radio" name="food" id="food1" value="10" />
<label for="food1">Yes</label>
<table width="100%" border="1" align="center">
    <tr>
        <td>Product</td>
        <td>Ages 10+</td>
        <td>Ages 3-9</td>
        <td>Food</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>2 Day Ticket</td>
        <td>$235.00</td>
        <td>$223.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="2DayTotal"></span> 
        </td>
    </tr>
    <tr>
        <td>3 Day Ticket</td>
        <td>$301.00</td>
        <td>$285.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="3DayTotal"></span>

        </td>
    </tr>
    <tr>
        <td>4 Day Ticket</td>
        <td>$315.00</td>
        <td>$298.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="4DayTotal"></span>

        </td>
    </tr>
    <tr>
        <td>5 Day Ticket</td>
        <td>$328.00</td>
        <td>$309.00</td>
        <td><span id="food">0</span>

        </td>
        <td>$<span class="amount" id="5DayTotal"></span>

        </td>
    </tr>
</table>

JavaScript

var numAdult = 0;
var numChild = 0;

$("#Adult").change(function () {
    numAdult = $("#Adult").val();
    calcTotals();
});
$("#Child").change(function () {
    numChild = $("#Child").val();
    calcTotals();
});
$('input[type=radio]').change(function(evt) {
    $('#food').html($(this).val());
});

function calcTotals() {
    $("#2DayTotal").text(235 * numAdult + 223 * numChild);
    $("#3DayTotal").text(301 * numAdult + 285 * numChild);
    $("#4DayTotal").text(315 * numAdult + 298 * numChild);
    $("#5DayTotal").text(328 * numAdult + 309 * numChild);
}

这些问题是：

1. 我想让食物栏在点击收音机的时候改变它的价值。它只工作第一个id。
2. 在收音机被点击之后。一种叫calcTotals()的方法是为了加总额外的食物费用。

这里的演示：http://jsfiddle.net/4Jegn/178/

请给我建议。

Answer 1

好的，我已经做了一个演示，我认为你想要什么。但首先，我想给你一些建议。

原始代码的最大问题是将ID food分配给4个不同的<span>标记。这就是为什么您正在经历这样的行为:只有第一个单元正在发生变化，而另三个则被单独处理。只需将food更改为class而不是id，所有4个都会按预期进行更改。

在您的原始代码中，您有：

numAdult = $("#Adult").val();
numChild = $("#Child").val();

使用带有各种输入标记的.val()有时会遇到问题。这是因为.val()可以返回字符串、数字或数组，而且有时是不可预测的。在您的代码中，numAdult的值是string，而numChild的值是number。为了确保您获得了一个number，您可以这样做：

numAdult = parseInt($("#Adult").val(), 10);
numChild = parseInt($("#Child").val(), 10);

parseInt()简单地将您的string转换为number。使用parseInt()的最佳实践是始终定义第二个参数。我不会将您与其细节混淆，所以除非您试图解析二进制、八进制或十六进制数(很可能不是)，否则只给第二个参数的值。

我还想提到一些特定于jQuery的内容。下面是代码的另一个片段：

$("#Child").change(function () {
    numChild = $("#Child").val();
    calcTotals();
});

注意，$("#Child").val();在$('#Child').change(...)下面。由于jQuery事件处理程序用于#Child，所以最好将第二个选择器更改为$(this).val()。您需要这样做，因为DOM交互通常是任何js代码中最慢的部分。通过使用this而不是$('#Child')，您只能查询文档一次而不是两次。

在您的html中，我注意到您在<span>的<td>中包含了一个美元标记。这绝对是一种方法，但我确实想提到psuedo元。在我的演示中，我完全摆脱了<span>标签，使用CSS在正常内容之前插入了一个美元符号。Internet 8和up支持它，所以要考虑到这一点。

谢谢你的阅读:)好的，这是http://jsfiddle.net/mvmudneg/。祝好运。

我如何用像1500这样的逗号来格式化总数，而不是1500呢？

有两种方法可以做到这一点。一种方法是使用正则表达式，另一种方法是循环遍历字符串。我认为正则表达式路径可能是最有效的，但我不太熟悉RegExp而不是循环。这就是我想出来的：

function commas(str) {
    var output = [],
        decimalIndex = str.indexOf('.'),
        count = 0;
    for (var i = str.length - 1; i >= 0; i--) {
        if (count % 3 === 0 && count !== 0) {
            output.push(',');
        }

        if (decimalIndex === -1 || i < decimalIndex) {
            count++;
        }

        output.push(str[i]);
    }

    return output.reverse().join('');
}

不过，我不会再更新了。我想帮助您朝着正确的方向前进，而不是每次您有新的需求时都为您编写代码。

更新的JSFiddle。