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

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