jquery - jqueryを使ってフォームフィールドを計算する

Question

jquery ソースでフォームを計算したい

<form>
      <input type="radio" name="type" value="1000"> $1000
      <input type="radio" name="type" value="2000"> $2000
      <input type="radio" name="type" value="3000"> $3000
      <input type="radio" name="type" value="4000"> $4000
      <input type="radio" name="type" value="5000"> $5000

    <select name="number">
      <option name="number" value="1">1</option>
      <option name="number" value="1">2</option>
      <option name="number" value="1">3</option>
      <option name="number" value="1">4</option>
      <option name="number" value="1">5</option>
    </select>

</form>

*数値を入力し、テキスト入力で合計を表示する必要があります

Answer 1

と要素change()の両方にa をバインドして、合計を計算できます。:radio<select/>

$("select[name='number'], :radio[name='type']").change(function(){
    var $r = $(":radio[name='type']:checked");
    var $d = $("select[name='number']");
    if($r.length ==1){
        var t = parseInt($r.val(), 10);
        var n = parseInt($d.val(), 10);
        $("#result").val(t*n);
    }
});

jsfiddle の例

Answer 2

これが私が得たものです

http://jsfiddle.net/04gqaLog/2/

$(document).ready(function() {
    $("input[type='radio']").on("click", function() {
        var price = +$(this).attr("value");
        var quantity = +$("option:selected").text();
        $("#total").text(price * quantity);
    });
});

楽しいヒント: を使用+して、文字列を数値に自動的に変換できます。parseIntorよりもはるかに短いですNumber。

Answer 3

デモ： http： //jsfiddle.net/wdm954/enKV6/

$('select[name=number]').change(compute);
$('input[name=type]').change(compute);

function compute() {
    if ( $('input[name=type]:checked').val() != undefined ) {
        var a = $('input[name=type]:checked').val();
        var b = $('select[name=number]').val();
        var total = a * b;
        $('#total').val(total);
    }
}