-4

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

我需要“付款”的值是计划 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/

我最诚挚地感谢您的任何帮助。

4

3 回答 3

1

这段代码应该是你需要的：

.on() 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));
    });
});

为你添加一个小提琴。

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

于 2014-07-14T15:44:10.130 回答
1

这涵盖了两种可能性。我不得不更改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/

于 2014-07-14T15:59:18.787 回答
0

这里有一些让你开始的东西：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...');
    });
});

以后，先自己动手吧——如果我们看到你努力了，人们会更愿意提供帮助！

于 2014-07-14T15:40:53.827 回答