jquery-チェックボックス/ラジオ/ドロップダウンフォームに記入して合計金額を計算します

Question

私は3つのセクションを持つ支払いフォームを持っています。基本的に、最初は乗算器付きの "ラジオ"リスト、2番目は設定値付きの "チェックボックス"リスト、3番目は乗算器付きのドロップダウンリスト==>(jsfiddle)です。わかりやすくするために、合計計算値を表示するテキストボックスを挿入しました。

ユーザーがこのフォームに記入すると、合計を計算して表示するにはどうすればよいですか？

thisスタックオーバーフローレスポンスを使用しようとしましたが、全く機能しません。 $(':input').not('#total').changeからは#totalを除外するために、あなたがその変化を聞きたくないよう

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

はあなたのセレクタを変更することができます。

の配列をボックスに設定すると、 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>