Question

我需要在首先选择两个价格计划选项之一后对表单进行计算，而我对jQuery的了解还不够（还有！）：）

我需要＆＃34;付款＆＃34;的价值要么是计划1中的选择框总数，要么是计划2的设定价格，我非常感谢帮助实现计算。

这里有一些代码：

<div class="form-row">
    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
                <label for=""></label>
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="0.00" checked /> Plan 1
            </div>
        </div>
        <div class="form-row">
            <div class="label-container">
                <label for="Bin1_Count">Bin 1</label>
            </div>
            <div class="input-container">
                <select id="Bin1_Count" name="Bin1_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 - 10.00</option>
                    <option value="15.00">3 - 15.00</option>
                    <option value="52.00">13 - 52.00</option>
                </select>
            </div>
        </div>
        <div class="form-row">            
            <div class="label-container">
                <label for="Bin2_Count">Bin 2</label>
            </div>
            <div class="input-container">
                <select id="Bin2_Count" name="Bin2_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 clean - 10.00</option>
                    <option value="15.00">3 cleans - 15.00</option>
                    <option value="52.00">13 cleans - 52.00</option>
                </select>
            </div>
        </div>        

    </div>

    <div class="plan-select-split">OR</div>

    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="120" /> Plan 2
                <p>Set price<br /></p>
            </div>
        </div>        
    </div>
</div>
<div class="form-row">
    <div class="label-container">
        <label for="Payment">Total</label>
    </div>
    <div class="input-container">
        <input type="text" id="Payment" name="Payment" value="0.00" readonly />
    </div>
</div>

这是一个小提琴：http://jsfiddle.net/xXQHJ/3/

我最诚挚地提前感谢您的帮助。

Answer 1

此代码应该是您所需要的：

.on() documentation for jQuery

$(document).ready(function() {
    $(document).on('change', '.binOptions', function() {
        var bin1, bin2, finalTotal;
        bin1 = $(' #Bin2_Count option:selected ').val();
        bin2 = $(' #Bin1_Count option:selected ').val();
        finalTotal = parseFloat(bin1) + parseFloat(bin2);
        $(' #Payment ').val(finalTotal.toFixed(2));
    });
});

Anddd为你fiddle。

编辑：请注意，“binOptions”类已添加到您的选择框中。此外，戴夫的答案也是正确的，但请注意.change（）不会处理动态生成到您页面的内容（只是一些信息，以便将来进行校对）。

Answer 2

这涵盖了两种可能性。我不得不改变无线电上的id s，无论如何它们应该是不同的。

$('input[name=planchoose], select').on('change',function(){
    var chosenPlan = $('input[name=planchoose]:checked').attr('id');
    var total = 0.00;
    switch (chosenPlan){
        case 'planchoose1':
            total = parseFloat($('#Bin1_Count').val()) +  parseFloat($('#Bin2_Count').val());
        break;
        case 'planchoose2':
            total = parseFloat($('#planchoose2').val());
        break;
    }
    $('#Payment').val(total.toFixed(2));
});

小提琴：http://jsfiddle.net/xXQHJ/5/

Answer 3

以下是让您入门的内容：http://jsfiddle.net/daveSalomon/xXQHJ/4/。

代码的要点：没有相同的ID附加到多个元素。 ID必须是唯一的。

<强> HTML

<div class="form-row">
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
            <label for=""></label>
        </div>
        <div class="input-container">
            <input type="radio" id="plancalc" name="plan" value="0.00" checked /> Plan 1
        </div>
    </div>
    <div class="form-row">
        <div class="label-container">
            <label for="Bin1_Count">Bin 1</label>
        </div>
        <div class="input-container">
            <select id="Bin1_Count" name="Bin1_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 - 10.00</option>
                <option value="15.00">3 - 15.00</option>
                <option value="52.00">13 - 52.00</option>
            </select>
        </div>
    </div>
    <div class="form-row">            
        <div class="label-container">
            <label for="Bin2_Count">Bin 2</label>
        </div>
        <div class="input-container">
            <select id="Bin2_Count" name="Bin2_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 clean - 10.00</option>
                <option value="15.00">3 cleans - 15.00</option>
                <option value="52.00">13 cleans - 52.00</option>
            </select>
        </div>
    </div>        
</div>
<div class="plan-select-split">OR</div>
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
        </div>
        <div class="input-container">
            <input type="radio" id="planset" name="plan" value="120" /> Plan 2
            <p>Set price<br /></p>
        </div>
    </div>        
</div>
</div>
<div class="form-row">
<div class="label-container">
    <label for="Payment">Total</label>
</div>
<div class="input-container">
    <input type="text" id="Payment" name="Payment" value="0.00" readonly />
</div>
</div>

<强>的Javascript

$(document).ready(function(){
    // -- calculated price
    $('#plancalc,#Bin1_Count,#Bin2_Count').change(function(){
        var price = Number($('#Bin1_Count').val()) + Number($('#Bin2_Count').val());
        $('#plancalc').click();
        $('#Payment').val(price);
    });
    // -- set price
    $('#planset').change(function(){
        $('#Payment').val('set price...');
    });
});

将来，先做好自己 - 如果我们能够看到你做出努力，人们更愿意提供帮助！

jQuery表单计算

3 个答案: