jQuery, добавляющий числовое значение к элементу span

Question

У меня есть элемент HTML span, как показано ниже.

<span id="total_cost">4.99</span> 

Затем два следующих элемента ввода, как показано ниже (одно поле для радио и один флажок).

<!-- radio field --> 
    <input type="radio" name="delivery_method" value="standard" checked> standard (FREE) 
    <input type="radio" name="delivery_method" value="signed"> Signed (2.00) 
    <input type="radio" name="delivery_method" value="guaranteed"> Guaranteed (6.22) 

<!-- checkbox --> 
    <input type="checkbox" value="digital" name="digital"> Digital copy (2.00) 

При выборе Я хотел бы, что пользователь нажал на поле радио и флажок поля должны быть добавлены к значению в пролете элемента #total_cost. Я хотел бы использовать jQuery для этого решения.

У меня есть поля радио, которые работают с использованием javascript, но я хотел бы использовать jQuery, и я также не могу использовать эти флажки. Код для javascript, показанный ниже.

<script type="text/javascript"> 
$('input[name="delivery_method"]').on('change', function(){ 
    if ($(this).val()=='signed') { 
     $("#delivery_price").html("&pound;2.00"); 
     $("#delivery_method").html("Royal Mail Signed For First Class"); 
     $("#total_cost").html("&pound;<?php echo ($item)*4.99 + 2.00; ?>"); 
    } else if($(this).val()=='guaranteed') { 
     $("#delivery_price").html("&pound;6.22"); 
     $("#delivery_method").html("Royal Mail Special Delivery Guaranteed by 1PM"); 
     $("#total_cost").html("&pound;<?php echo ($item)*4.99 + 6.22; ?>"); 
    } else { 
     $("#delivery_price").html("&pound;0.00"); 
     $("#delivery_method").html("Royal Mail First Class"); 
     $("#total_cost").html("&pound;<?php echo ($item)*4.99; ?>"); 
    } 
}); 
</script> 

Любая помощь была бы принята с благодарностью. Большое спасибо заранее!

Answer 1

Попробуйте

<span id="total_cost">4.99</span> 

<!-- radio field --> 
<input type="radio" name="delivery_method" value="standard" data-price="0.00" data-method="Royal Mail First Class" checked />standard (FREE) 
<input type="radio" name="delivery_method" value="signed" data-price="2.00" data-method="Royal Mail Signed For First Class" />Signed (2.00) 
<input type="radio" name="delivery_method" value="guaranteed" data-price="6.22" data-method="Royal Mail Special Delivery Guaranteed by 1PM" />Guaranteed (6.22) 
<!-- checkbox --> 
<input type="checkbox" value="digital" name="digital" />Digital copy (2.00) 

затем

$('input[name="delivery_method"], input[name="digital"]').on('change', function() { 
    var $del = $('input[name="delivery_method"]:checked'); 
    var $dig = $('input[name="digital"]'); 

    $("#delivery_price").html('£' + $del.data('price')); 
    $("#delivery_method").html($del.data('method')); 

    var price = (parseFloat($del.data('price')) || 0) + ($dig.is(':checked') ? 2 : 0); 
    $("#total_cost").html('£' + price.toFixed(2)); 
}) 

Демо: Fiddle

Answer 2

Вы не показали какой-либо код для флажка, так что я не уверен, что вы пытались или почему или что именно вы пытаетесь с этим сделать, но если вам просто нужно установить флажок

Дайте CheckBox идентификатор

<input type="checkbox" ID='digital' value="digital" name="digital"> Digital copy (2.00) 

здесь образец jsfiddle

Answer 3

надежда, что это поможет вам: fiddle

var item = 0; //<?php echo ($item) ?>; 

$('input[name="delivery_method"]').on('change', function(){ 
    var total = 0; 
    if ($(this).val()=='signed') { 
     $("#delivery_price").html("&pound;2.00"); 
     $("#delivery_method").html("Royal Mail Signed For First Class"); 
     total = item * 4.99 + 2.00; 
     $("#total_cost").text(total); 
    } else if($(this).val()=='guaranteed') { 
     $("#delivery_price").html("&pound;6.22"); 
     $("#delivery_method").html("Royal Mail Special Delivery Guaranteed by 1PM"); 
     total = item * 4.99 + 6.22; 
     $("#total_cost").html(total); 
    } else { 
     $("#delivery_price").html("&pound;0.00"); 
     $("#delivery_method").html("Royal Mail First Class"); 
     total = item * 4.99; 
     $("#total_cost").html(total); 
    } 
});