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)

在选择时，我希望用户按下以将单选字段和复选框字段添加到span元素#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));
})

演示： 小提琴

Answer 2

您没有显示该复选框的任何代码，所以我不确定您尝试过什么，为什么失败，或者您到底想做什么，但是如果您只需要复选框的值

为复选框提供一个ID

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

这是一个示例jsfiddle

Answer 3

希望对您有帮助： 提琴

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);
    }
});