Question

我尝试在订单页面上进行计算，但是有关无线电输入的问题。如果我删除无线电输入，计算有效，但在这种情况下，它显示0.你能帮助我吗？

＆＃13;

$('#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);
});

＆＃13;

<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" />

＆＃13;

Answer 1

id应该是唯一的，总是使用相同的class来代替元素组，并使用 :checked 伪选择器获取checked无线电。还可以使用 Number() 或 parseFloat() 解析值以转换为数字。

＆＃13;

<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>

＆＃13;

Answer 2

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" />

Answer 3

获取单选按钮的值：

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

然后你可以在计算之前使用Number()函数。

JQuery输入计算

3 个答案: