Question

我正在处理一个自动计算表单，在单击一个无线电和一个下拉列表后，总列数会发生变化。我可以对两个下拉列表进行总更改，但是当我尝试添加无线电选项时会出现问题。这是我的代码。

HTML

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);
}

问题是：

我希望食物栏在点击广播时改变它的价值。它仅适用于第一个ID。
点击收音机后。调用 calcTotals（）来补充额外的食品成本。

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

请咨询。

Answer 1

好吧，我已经演示了我认为你想要的东西。但首先，我想给你一些提示。

原始代码的最大问题是您要将ID food分配给4个不同的<span>代码。这就是为什么您遇到的行为只有第一个单元格正在发生变化，另外3个单独存在。只需将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()的最佳做法是始终定义第二个参数。我不会对你的细节感到困惑，所以除非你试图解析二进制，八进制或十六进制数（可能不是），否则只给第二个参数赋值为10 < /强>

我还想提一些特定于jQuery的东西。这是您的代码的另一个片段：

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

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

在您的HTML中，我注意到您在<span>内添加了<td>，因此您可以拥有一个美元符号。这绝对是一种方法，但我确实想提到CSS ::before psuedo element。在我的演示中，我完全摆脱了<span>标签并使用CSS在正常内容之前插入美元符号，而不是手动输入美元符号。 Internet Explorer 8及更高版本支持它，因此请考虑到这一点。

感谢阅读:)。好的，这是demo of what I think you want。祝你好运。

如何用逗号（如1,500而不是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(''); }
但是，我没有再次更新它。我希望帮助您朝着正确的方向前进，不必在每次有新要求时为您编写代码。

Updated JSFiddle。

如何在下拉列表和无线电选择上自动计算值

1 个答案: