Использование 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)
});

Пример jsFiddle

Также обратите внимание, как добавлен флажок с троичным оператором:

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