使用jQuery从3种不同类型的表单字段中添加值

Question

我有一个带有输入类型文本字段、选择菜单和复选框的表单。每个表单字段存储一个数值，这取决于用户输入、选择或检查的内容。

是否有可能使用jQuery来添加这三个值，并在第四个表单字段中实时显示总数?

这是我的JSFiddle，如果所有字段都是输入类型的文本，它就可以工作，尽管我仍然无法让它将总价值放在第四个表单字段中:

jQuery

$('input').keyup(function(){ // run anytime the value changes
    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it
    var firstValueComplex = parseFloat($('#firstComplex').val()); // get value of field
    var secondValueComplex = parseFloat($('#secondComplex').val()); // convert it to a float
    var thirdValueComplex = parseFloat($('#thirdComplex').val());
    $('#addedComplex').html(firstValueComplex + secondValueComplex + thirdValueComplex); // add them and output it
});

HTML

<input id="second" value="0"></input><br />
<input id="third" value="0"></input><br />
<b>Total:<span id="added"></span></b><br />
<input id="firstComplex" value=""></input><br />
<select id="secondComplex">
    <option value="0" selected>0</option>
    <option value="15">15</option>
    <option value="30">30</option>
</select><br>
<input type="checkbox" id="thirdComplex" value="16"> Add Value<br>
<b>Total:<span id="addedComplex"></span></b>
<input id="total" value="<span id=addedComplex></span>"></input>

http://jsfiddle.net/nathonjones/c3n5vc8f/3/

希望你能帮忙，谢谢。新泽西

Answer 1

您希望在多个输入上绑定多个事件，可以这样做:

$(':input').on('change keyup check',function () { // run anytime the value changes
    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    $('#added').html(firstValue + secondValue + thirdValue); // add them and output it
    var firstValueComplex = parseFloat($('#firstComplex').val()) || 0; // get value of field
    var secondValueComplex = parseFloat($('#secondComplex').val()); // convert it to a float
    var thirdValueComplex = $('#thirdComplex').is(':checked') ? parseFloat($('#thirdComplex').val()) : 0;
    $('#addedComplex').html(firstValueComplex + secondValueComplex + thirdValueComplex); // add them and output it
    $('#total').val(firstValueComplex + secondValueComplex + thirdValueComplex)
});

<<p> jsFiddle例子/strong>

还要注意复选框是如何使用三元操作符添加的:

var thirdValueComplex = $('#thirdComplex').is(':checked') ? parseFloat($('#thirdComplex').val()) : 0;