Несколько типов ввода sum

Question

Я собираюсь суммировать несколько входов вместе с выбором, радио и текстом.

У меня есть следующий код, который работает, но отменяет каждый другой вход, я ищу, чтобы добавить их все вместе.

Я знаю, что был бы лучший способ структурировать это, но я не могу найти хорошее решение.

Посмотреть

<select> 
    <option value='0.0'>Product 1</option> 
    <option value='0.5'>Product 2</option> 
    <option value='1.0'>Product 3</option> 
    <option value='0.5'>Product 4</option> 
    </select> 

    <h4>Desired price</h4> 
    <input class="inputBox form-control" type="text" id="desired_price" > 

    <form> 
    <label class="radio inline"> 
    <input type="radio" name="location" value="0.1" > location 1 
    </label> 
    <label class="radio inline"> 
    <input type="radio" name="location" value="0.1" > location 2 
    </label> 
    <label class="radio inline"> 
    <input type="radio" name="location" value="0.4" > location 3 
    </label> 
    <label class="radio inline"> 
    <input type="radio" name="location" value="0.7" > location 4 
    </label> 
    <label class="radio inline"> 
    <input type="radio" name="location" value="1.0" > location 5 
    </label> 
    </form> 

<b id="score_total">0</b> 

JQuery

$(document).ready(function() { 
var desiredPrice = document.getElementById("desired_price"); 

desiredPrice.onkeyup = calc; 

function calc() { 
    document.getElementById("score_total").innerHTML = parseFloat(desiredPrice.value).toFixed(1); 
    } 

// All radios sum gathered 
$('input[type=radio]').change(function(){ 
var total = 0; 
$('input[type=radio]:checked').each(function(){ 
    total += Number($(this).val()); 
}); 
    $('#score_total').html(total); 
}); 

// select 
$('select').change(function(){ 
    var variety = 0; 
$('select :selected').each(function() { 
    variety += Number($(this).val()); 
}); 
    $('#score_total').html(variety); 
}); 

}); 

Answer 1

вы должны определить 'изменить' обработчик событий для #score_total, а затем триггер #score_total изменение события на sele ct, радио и текстовое поле.

Этот код может вам помочь.

вы можете редактировать код here и использовать его после редактирования.

$(document).ready(function() { 
 
    $('#score_total').on('change', function() { 
 
    var sum = 0; 
 
    $('select, [type=text], [type=radio]:checked').each(function(){ 
 
     sum += Number($(this).val()); \t 
 
    }); 
 
    $(this).text(sum); 
 
    }); 
 
    $('select').on('change', function(){ 
 
    \t $('#score_total').trigger('change'); \t 
 
    }); 
 
    $('[type=text]').on('keyup', function(){ 
 
    \t $('#score_total').trigger('change'); 
 
    }); 
 
    $('[type=radio]').on('click', function(){ 
 
    \t $('#score_total').trigger('change'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select> 
 
    <option value='0.0'>Product 1</option> 
 
    <option value='0.5'>Product 2</option> 
 
    <option value='1.0'>Product 3</option> 
 
    <option value='0.5'>Product 4</option> 
 
</select> 
 

 
<h4>Desired price</h4> 
 
<input class="inputBox form-control" type="text" id="desired_price"> 
 

 
<form> 
 
    <label class="radio inline"> 
 
    <input type="radio" name="location" value="0.1"> location 1 
 
    </label> 
 
    <label class="radio inline"> 
 
    <input type="radio" name="location" value="0.1"> location 2 
 
    </label> 
 
    <label class="radio inline"> 
 
    <input type="radio" name="location" value="0.4"> location 3 
 
    </label> 
 
    <label class="radio inline"> 
 
    <input type="radio" name="location" value="0.7"> location 4 
 
    </label> 
 
    <label class="radio inline"> 
 
    <input type="radio" name="location" value="1.0"> location 5 
 
    </label> 
 
</form> 
 

 
<b id="score_total">0</b>

Answer 2

Попробуйте это:

$(document).ready(function() { 

    var totalValues = [0.0, 0.0, 0.0]; // array that stores parcial totals 
    var desiredPrice = document.getElementById("desired_price"); 

    var totalCalc = function(){ //Calculates and displays total sum 
     document.getElementById("score_total").innerHTML = (totalValues[0] + totalValues[1] + totalValues[2]).toFixed(1); 
    } 

    //Functions to calculate each block sum 
    var calcDesiredPrice = function(){  
    totalValues[0] = parseFloat(desiredPrice.value); 
    totalCalc(); 
    } 

    var calcRadios = function(){ 
    var total = 0; 
    $('input[type=radio]:checked').each(function(){ 
     total += Number($(this).val()); 
    }); 
    totalValues[1] = total; 
    totalCalc(); 
    } 

    var calcSelect = function(){ 
    var variety = 0; 
    $('select :selected').each(function() { 
     variety += Number($(this).val()); 
    }); 

    totalValues[2] = variety; 
    totalCalc(); 
    } 

    //Set the handlers for the form changes 
    desiredPrice.onkeyup = calcDesiredPrice; 
    $('input[type=radio]').change(calcRadios); 
    $('select').change(calcSelect); 

});