jquery-填寫複選框/收音機/下拉表單後計算總價值

Question

我有三個部分的付款表單。基本上，第一個是帶有乘法器的「無線電」列表，第二個是帶有設定值的「複選框」列表，第三個是帶有乘法器的下拉列表==>(jsfiddle)。爲了清楚起見，我插入了一個文本框，顯示總計算值。

當用戶填寫此表格時，我如何計算並顯示總數？

我嘗試使用this堆棧溢出響應，但它根本不起作用。

$('input').change(function(){ 
    var tot = 1; 
    $.each($('input'),function(){ 
     var curr_val = $(this).val(); 
     if(curr_val != ""){ 
      tot = tot * curr_val; 
      $('#total').val(tot); 
     } 
    }); 
}); 

Answer 1

到排除的#total你可以改變你的選擇，你不想聽聽它的變化 - $(':input').not('#total').change。

你可以使用 jquery函數來獲取的數組，檢查框。

下一個步驟將是乘他們都 - 用#reduce()功能添加的陣列。

請參見下面的演示：

$(':input').not('#total').change(function() { 
 
    var tot = 1; 
 

 
    var s1 = +$('input[name=section1]:checked').val(); 
 
    var s2 = $('input[name=section2]:checked').map(function() { 
 
    return +$(this).val(); 
 
    }).get(); 
 
    var s3 = +$('select').val(); 
 
    $('#total').val(s1 * (s2.reduce(function(p,c){ 
 
    return p + c; 
 
    },0) || 1) * s3); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action=""> 
 
    <div id="section1">Section 1 
 
    <br><input type="radio" name="section1" value="2"> x2 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1.5"> x1.5 
 
    <br><input type="radio" name="section1" value="1"> x1 
 
    <br><input type="radio" name="section1" value="1"> x1 
 
    </div> 
 
    <br> 
 
    <div id="section2">Section 2 
 
    <br><label><input type="checkbox" name="section2" value="4"><span>1</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>2</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>3</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>4</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>5</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>6</span></label> 
 
    <br><label><input type="checkbox" name="section2" value="4"><span>7</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>8</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>9</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>10</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>11</span></label> 
 
    <label><input type="checkbox" name="section2" value="4"><span>12</span></label> 
 
    </div> 
 
    <br> 
 
    <div>Section 3<br> 
 
    <select> 
 
    <option value="7">1 week</option> 
 
    <option value="14">2 weeks</option> 
 
    <option value="21">3 weeks</option> 
 
    <option value="28">4 weeks</option> 
 
    </select> 
 
    </div> 
 
    <input type="text" value="0" id="total"> 
 
</form>