Question

我将对来自不同类型的表单元素的值求和。下拉并输入。这个过程进展顺利，但在我更改选项后，我坚持总计不是自动更新。

这是我的代码：

<form>
        <label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label>
        <label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/>

        <label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label>
        <label>qty:     <select name="cost_2_qty">
    <option 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>
    </select></label><br/>

        <label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label>
        <label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/>

        <strong id="summation"></strong><br/>
    </form>
    <script type="text/javascript">

        function doTotal() {
            var total = 0.0;

            $(".summable").each(function (idx, element) {
                $this = $(this);

                var cost = parseFloat($this.val());
                var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty]
                var qty = parseFloat($(qty_selector).val());
                if (cost && qty)
                    total += cost * qty ;
            });

            $("#summation").html(total.toFixed(2));
        }

        $(document).ready(function() {
            $("input[type=text]").blur(function (e) {
                doTotal();
            })
        });         
    </script>

此处的实时版本：http://jsfiddle.net/hWcMv/

我需要在选择一个选项后立即计算总值。请建议。

Answer 1

    $(document).ready(function() {
        $('[name*="cost"]').change(function () {
            doTotal();
        })
    });

http://jsfiddle.net/hWcMv/2/

使用下拉列表和输入自动化jQuery Calculator

1 个答案: