Question

我想通过小计和运费的值显示总价格，但我的代码无法在输入文字字段中获得小计值。

示例：

Subtotal: 200
Shipping A: 100 (checked)
Shipping B: 200
Totalprice: 300

or

Subtotal: 200
Shipping A: 100 
Shipping B: 200 (checked)
Totalprice: 400

这是我jsfiddle上的代码。

Answer 1

使用.val()设置值.html()

另请注意，$(".subtotal")将返回jQuery包装对象，但我们需要该元素的值，因此使用parseInt($(".subtotal").val())来获取该输入字段的已解析值。如果您希望获得.text()值而不是.html()

，请使用text代替html

试试这个：

function updateCosts() {
  var totals = parseInt($(".subtotal").val());
  $.each($('#content input[type=radio]:checked'), function() {
    totals += parseInt($.trim($(this).next('.shippingcost').text()));
  });
  $('#totalPrice').val(totals);
}

$(document).ready(function() {
  $('#content input[type=radio]').change(updateCosts);
  //_____________________________^^^^^^^_^^^^^^^^^^^
  //Use change event instead of click, handler can be attached this way
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Subtotal:
<input type="text" value="200" name="subtotal" class="subtotal">
<div id="content">
  A:
  <input type="radio" name="shippingcost" checked> <span class="shippingcost"> 100 </span> B:
  <input type="radio" name="shippingcost"> <span class="shippingcost"> 200 </span>
</div>
Total price:
<input type="text" name="totalprice" id="totalPrice">

Fiddle here

使用jquery通过无线电更改输入文本字段值

1 个答案: