jQuery表单计算

首先选择两个价格计划选项中的一个之后，我需要在表单上生成一个计算，而我对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>

计划1
垃圾箱1
-选择-
1 - 10.00
3 - 15.00
13 - 52.00
垃圾箱2
-选择-
1清洁-10.00
3次清洁-15.00
13次清洁-52.00
或
计划2
设定价格

全部的

这是一把小提琴：

---

我在此衷心感谢您的帮助。

这里有一些东西可以帮助您开始：

代码的要点：不要将相同的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>

---

将来，一定要先自己动手——如果我们能看到你的努力，人们会更愿意提供帮助

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

为你准备一份礼物

---

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

这涵盖了这两种可能性。我必须更改收音机上的

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

---

Fiddle:

你写过JavaScript吗？我知道已经很晚了，但谢谢你。你的回答帮助我最终完成了整件事。也谢谢你没有责骂我，因为我没有把自己的非工作尝试溅得到处都是！

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

$('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));
});