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('&pound;' + $del.data('price'));
    $("#delivery_method").html($del.data('method'));

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

演示：Fiddle

Answer 2

您没有显示该复选框的任何代码，所以我不确定您尝试了什么或者它失败的原因或您正在尝试用它做什么，但如果您只需要复选框的值

给复选框一个ID

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

jQuery向span元素添加数值

3 个答案: