jQuery的形式計算

Question

我需要後第一選擇兩個價格計劃選擇一個和我的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/

我感謝你最真誠地提前任何幫助。

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

這裏有一些東西讓你開始：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...'); 
    }); 
}); 

在未來，也有第一次去自己 - 人們更願意幫助，如果我們可以看到，你已經做了一個努力！

Answer 3

這涵蓋了兩種可能性。我不得不改變收音機上的id，無論如何它們應該是明顯的。

$('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/