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

您可以将 a 绑定change()到: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);
    }
}