0

さまざまな種類のフォーム要素の値を合計します。ドロップダウンして入力します。プロセスは順調に進んでいますが、オプションを変更した後、合計が自動更新されずに行き詰っています。

これが私のコードです：

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

オプションを選択した直後に合計値を計算する必要があります。提案してください。

4

1 に答える 1

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

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

于 2012-11-23T15:59:36.793 に答える