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

的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(); 

然後你就可以計算之前使用​​功能。

Answer 3

這些ID必須是唯一的。因此，兩種不同元素的id =「typeof」是錯誤的。

如果你沒有單選按鈕的ID，你總是可以選擇檢查一個用：

$('.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" />