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"클래스가 선택 상자에 추가되었습니다. 또한 Dave의 답변도 정확합니다. 그러나 .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> 

자바 스크립트 앞으로

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

, A가 먼저 자신을 이동해야합니까 - 사람들은 우리가 당신이를했습니다 볼 수 있다면 도움을 더 기꺼이 노력!

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/