JQuery входной расчет

Question

Я пытаюсь сделать расчет на странице заказа, но есть проблема с радиовходом. Если я удаляю радиовходы, расчет работает, но с этим условием он показывает 0. Не могли бы вы мне помочь?

$('#typeof, #cars, #distance').on('keyup change', function() { 
 
    var ser = $('#typeof').val(); 
 
    var dist = $('#distance').val(); 
 
    var car = $('#cars').val(); 
 
    var res = ser * dist * car; 
 
    $('#result').val(res || 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
Enter Distance: 
 
<input id="distance" /> 
 
<div class="form-group1"> 
 
    <label for="typeofservice">Type of Service:</label> 
 
    <input type="radio" name="optionsRadios5" id="typeof" value="1">1 
 
    <input type="radio" name="optionsRadios5" id="typeof" value="2">2 
 
</div> 
 

 
<div class="styled-select"> 
 
    <select name="dropdown" id="cars"> 
 
    <option value="1">Mercedes</option> 
 
    <option value="2">Scania</option> 
 
    <option value="3">Renault</option> 
 
    <option value="4">MAN</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br>Result: 
 
<input id="result" />

Answer 1

The id должен быть уникальным всегда использовать тот же class вместо этого для группы элементов и получить checked радио с помощью :checked псевдо-селектор. Также проанализируйте значения для преобразования в число с использованием Number() или parseFloat().

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
Enter Distance: 
 
<input id="distance" /> 
 
<div class="form-group1"> 
 
    <label for="typeofservice">Type of Service:</label> 
 
    <input type="radio" name="optionsRadios5" class="typeof" value="1">1 
 
    <input type="radio" name="optionsRadios5" class="typeof" value="2">2 
 
</div> 
 

 
<div class="styled-select"> 
 
    <select name="dropdown" id="cars"> 
 
    <option value="1">Mercedes</option> 
 
    <option value="2">Scania</option> 
 
    <option value="3">Renault</option> 
 
    <option value="4">MAN</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br>Result: 
 
<input id="result" /> 
 

 
<script> 
 
    $('.typeof, #cars, #distance').on('keyup change', function() { 
 
    var ser = Number($('.typeof:checked').val()); 
 
    var dist = Number($('#distance').val()); 
 
    var car = Number($('#cars').val()); 
 
    var res = ser * dist * car; 
 
    $('#result').val(res || 0); 
 
    }); 
 
</script>

Answer 2

Получить значение кнопки радио с:

$('input[name=optionsRadios5]:checked').val(); 

Затем вы можете использовать функцию Number() перед вычислением.

Answer 3

Идентификаторы должны быть уникальными. Таким образом, id = "typeof" для двух разных элементов неверен.

Если вы не имеете идентификаторы переключателей вы всегда можете выбрать проверенную один с:

$('.form-group1 :radio:checked') 

Мое предложение:

$(function() { 
 
    $('.form-group1 :radio, #cars, #distance').on('keyup change', function() { 
 
    var ser = +$('.form-group1 :radio:checked').val() || 0; 
 
    var dist = +$('#distance').val() || 0; 
 
    var car = +$('#cars').val() || 0; 
 
    var res = ser * dist * car; 
 
    $('#result').val(res || 0); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
Enter Distance: 
 
<input id="distance" /> 
 
<div class="form-group1"> 
 
    <label for="typeofservice">Type of Service:</label> 
 
    <input type="radio" name="optionsRadios5" id="typeof1" value="1">1 
 
    <input type="radio" name="optionsRadios5" id="typeof2" value="2">2 
 
</div> 
 

 
<div class="styled-select"> 
 
    <select name="dropdown" id="cars"> 
 
     <option value="1">Mercedes</option> 
 
     <option value="2">Scania</option> 
 
     <option value="3">Renault</option> 
 
     <option value="4">MAN</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br>Result: 
 
<input id="result" />